example: Added with-contentlayer example (#30045)

## Documentation / Examples - [x] Make sure the linting passes Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
vercel · May 22, 2022 · 99b017e · 99b017e · ASDFGHJKLQWERTYUIOPA · May 22, 2023
1 parent e2fde26
commit 99b017e
Show file tree

Hide file tree

Showing 12 changed files with 280 additions and 0 deletions.
diff --git a/examples/with-contentlayer/.gitignore b/examples/with-contentlayer/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+
+# Contentlayer
+.contentlayer
diff --git a/examples/with-contentlayer/README.md b/examples/with-contentlayer/README.md
@@ -0,0 +1,21 @@
+# Contentlayer Example
+
+This example shows how to integrate Contentlayer in Next.js. Learn more about [Contentlayer](https://www.contentlayer.dev/docs).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-contentlayer)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-contentlayer&project-name=with-contentlayer&repository-name=with-contentlayer)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-contentlayer with-contentlayer-app
+# or
+yarn create next-app --example with-contentlayer with-contentlayer-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-contentlayer/contentlayer.config.js b/examples/with-contentlayer/contentlayer.config.js
@@ -0,0 +1,23 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+
+const computedFields = {
+ slug: {
+ type: 'string',
+ resolve: (doc) => doc._raw.sourceFileName.replace(/\.md$/, ''),
+ },
+}
+
+export const Post = defineDocumentType(() => ({
+ name: 'Post',
+ filePathPattern: `**/*.md`,
+ fields: {
+ title: { type: 'string', required: true },
+ date: { type: 'string', required: true },
+ },
+ computedFields,
+}))
+
+export default makeSource({
+ contentDirPath: 'posts',
+ documentTypes: [Post],
+})
diff --git a/examples/with-contentlayer/next.config.js b/examples/with-contentlayer/next.config.js
@@ -0,0 +1,3 @@
+const { withContentlayer } = require('next-contentlayer')
+
+module.exports = withContentlayer({})
diff --git a/examples/with-contentlayer/package.json b/examples/with-contentlayer/package.json
@@ -0,0 +1,15 @@
+{
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "contentlayer": "^0.2.4",
+ "next": "latest",
+ "next-contentlayer": "^0.2.4",
+ "react": "18.0.0",
+ "react-dom": "18.0.0"
+ }
+}
diff --git a/examples/with-contentlayer/pages/_app.js b/examples/with-contentlayer/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+ return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/with-contentlayer/pages/index.js b/examples/with-contentlayer/pages/index.js
@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import Head from 'next/head'
+import { allPosts } from 'contentlayer/generated'
+import { pick } from '@contentlayer/client'
+import utilStyles from '../styles/utils.module.css'
+
+export default function Home({ posts }) {
+ return (
+ <>
+ <Head>
+ <title>Home</title>
+ </Head>
+
+ <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
+ <h2 className={utilStyles.headingLg}>Blog</h2>
+ <ul className={utilStyles.list}>
+ {posts.map(({ slug, date, title }) => (
+ <li className={utilStyles.listItem} key={slug}>
+ <Link href={`/posts/${slug}`}>
+ <a>{title}</a>
+ </Link>
+ <br />
+ <small className={utilStyles.lightText}>{date}</small>
+ </li>
+ ))}
+ </ul>
+ </section>
+ </>
+ )
+}
+
+export async function getStaticProps() {
+ const posts = allPosts.map((post) => pick(post, ['title', 'date', 'slug']))
+
+ return { props: { posts } }
+}
diff --git a/examples/with-contentlayer/pages/posts/[id].js b/examples/with-contentlayer/pages/posts/[id].js
@@ -0,0 +1,33 @@
+import Head from 'next/head'
+import { allPosts } from 'contentlayer/generated'
+import utilStyles from '../../styles/utils.module.css'
+
+export default function Post({ post }) {
+ return (
+ <>
+ <Head>
+ <title>{post.title}</title>
+ </Head>
+
+ <article>
+ <h1 className={utilStyles.headingXl}>{post.title}</h1>
+ <div className={utilStyles.lightText}>{post.date}</div>
+
+ <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+ </article>
+ </>
+ )
+}
+
+export async function getStaticPaths() {
+ return {
+ paths: allPosts.map((p) => ({ params: { id: p.slug } })),
+ fallback: false,
+ }
+}
+
+export async function getStaticProps({ params }) {
+ const post = allPosts.find((post) => post.slug === params?.id)
+
+ return { props: { post } }
+}
diff --git a/examples/with-contentlayer/posts/pre-rendering.md b/examples/with-contentlayer/posts/pre-rendering.md
@@ -0,0 +1,11 @@
+---
+title: 'Two Forms of Pre-rendering'
+date: '2020-01-01'
+---
+
+Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
+
+- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
+- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.
+
+Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
diff --git a/examples/with-contentlayer/posts/ssg-ssr.md b/examples/with-contentlayer/posts/ssg-ssr.md
@@ -0,0 +1,19 @@
+---
+title: 'When to Use Static Generation v.s. Server-side Rendering'
+date: '2020-01-02'
+---
+
+We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
+
+You can use Static Generation for many types of pages, including:
+
+- Marketing pages
+- Blog posts
+- E-commerce product listings
+- Help and documentation
+
+You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
+
+On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
+
+In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
diff --git a/examples/with-contentlayer/styles/globals.css b/examples/with-contentlayer/styles/globals.css
@@ -0,0 +1,22 @@
+html,
+body {
+ padding: 0;
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ line-height: 1.6;
+ font-size: 18px;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+a {
+ color: #0070f3;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
diff --git a/examples/with-contentlayer/styles/utils.module.css b/examples/with-contentlayer/styles/utils.module.css
@@ -0,0 +1,52 @@
+.heading2Xl {
+ font-size: 2.5rem;
+ line-height: 1.2;
+ font-weight: 800;
+ letter-spacing: -0.05rem;
+ margin: 1rem 0;
+}
+
+.headingXl {
+ font-size: 2rem;
+ line-height: 1.3;
+ font-weight: 800;
+ letter-spacing: -0.05rem;
+ margin: 1rem 0;
+}
+
+.headingLg {
+ font-size: 1.5rem;
+ line-height: 1.4;
+ margin: 1rem 0;
+}
+
+.headingMd {
+ font-size: 1.2rem;
+ line-height: 1.5;
+}
+
+.borderCircle {
+ border-radius: 9999px;
+}
+
+.colorInherit {
+ color: inherit;
+}
+
+.padding1px {
+ padding-top: 1px;
+}
+
+.list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.listItem {
+ margin: 0 0 1.25rem;
+}
+
+.lightText {
+ color: #666;
+}