Initial commit from Create Next App

This commit is contained in:
Kasper Juul Hermansen 2022-10-12 22:06:54 +02:00
commit 7f593c65e4
Signed by: kjuulh
GPG Key ID: 57B6E1465221F912
12 changed files with 2138 additions and 0 deletions

36
.gitignore vendored Normal file
View File

@ -0,0 +1,36 @@
# 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*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

83
README.md Normal file
View File

@ -0,0 +1,83 @@
# MDX Remote Example
This example shows how a simple blog might be built using the [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) library, which allows mdx content to be loaded via `getStaticProps` or `getServerSideProps`. The mdx content is loaded from a local folder, but it could be loaded from a database or anywhere else.
The example also showcases [next-remote-watch](https://github.com/hashicorp/next-remote-watch), a library that allows next.js to watch files outside the `pages` folder that are not explicitly imported, which enables the mdx content here to trigger a live reload on change.
Since `next-remote-watch` uses undocumented Next.js APIs, it doesn't replace the default `dev` script for this example. To use it, run `npm run dev:watch` or `yarn dev:watch`.
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
[![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-mdx-remote&project-name=with-mdx-remote&repository-name=with-mdx-remote)
## 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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
```bash
npx create-next-app --example with-mdx-remote with-mdx-remote-app
```
```bash
yarn create next-app --example with-mdx-remote with-mdx-remote-app
```
```bash
pnpm create next-app --example with-mdx-remote with-mdx-remote-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)).
## Notes
### Conditional custom components
When using `next-mdx-remote`, you can pass custom components to the MDX renderer. However, some pages/MDX files might use components that are used infrequently, or only on a single page. To avoid loading those components on every MDX page, you can use `next/dynamic` to conditionally load them.
For example, here's how you can change `getStaticProps` to pass a list of component names, checking the names in the page render function to see which components need to be dynamically loaded.
```js
import dynamic from 'next/dynamic'
import Test from '../components/test'
const SomeHeavyComponent = dynamic(() => import('SomeHeavyComponent'))
const defaultComponents = { Test }
export function SomePage({ mdxSource, componentNames }) {
const components = {
...defaultComponents,
SomeHeavyComponent: componentNames.includes('SomeHeavyComponent')
? SomeHeavyComponent
: null,
}
return <MDXRemote {...mdxSource} components={components} />
}
export async function getStaticProps() {
const source = `---
title: Conditional custom components
---
Some **mdx** text, with a default component <Test name={title}/> and a Heavy component <SomeHeavyComponent />
`
const { content, data } = matter(source)
const componentNames = [
/<SomeHeavyComponent/.test(content) ? 'SomeHeavyComponent' : null,
].filter(Boolean)
const mdxSource = await serialize(content)
return {
props: {
mdxSource,
componentNames,
},
}
}
```

16
components/CustomLink.js Normal file
View File

@ -0,0 +1,16 @@
import Link from 'next/link'
export default function CustomLink({ as, href, ...otherProps }) {
return (
<>
<Link as={as} href={href}>
<a {...otherProps} />
</Link>
<style jsx>{`
a {
color: tomato;
}
`}</style>
</>
)
}

49
components/Layout.js Normal file
View File

@ -0,0 +1,49 @@
export default function Layout({ children }) {
return (
<>
<div className="wrapper">{children}</div>
<style jsx>{`
.wrapper {
max-width: 36rem;
margin: 0 auto;
padding: 1.5rem;
}
`}</style>
<style jsx global>{`
* {
margin: 0;
padding: 0;
}
:root {
--site-color: royalblue;
--divider-color: rgba(0, 0, 0, 0.4);
}
html {
font: 100%/1.5 system-ui;
}
a {
color: inherit;
text-decoration-color: var(--divider-color);
text-decoration-thickness: 2px;
}
a:hover {
color: var(--site-color);
text-decoration-color: currentcolor;
}
h1,
p {
margin-bottom: 1.5rem;
}
code {
font-family: 'Menlo';
}
`}</style>
</>
)
}

View File

@ -0,0 +1,16 @@
export default function TestComponent({ name = 'world' }) {
return (
<>
<div>Hello, {name}!</div>
<style jsx>{`
div {
background-color: #111;
border-radius: 0.5em;
color: #fff;
margin-bottom: 1.5em;
padding: 0.5em 0.75em;
}
`}</style>
</>
)
}

17
package.json Normal file
View File

@ -0,0 +1,17 @@
{
"private": true,
"scripts": {
"dev": "next",
"dev:watch": "next-remote-watch ./posts",
"build": "next build",
"start": "next start"
},
"dependencies": {
"gray-matter": "^4.0.2",
"next": "latest",
"next-mdx-remote": "^3.0.1",
"next-remote-watch": "1.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}

45
pages/index.js Normal file
View File

@ -0,0 +1,45 @@
import fs from 'fs'
import matter from 'gray-matter'
import Link from 'next/link'
import path from 'path'
import Layout from '../components/Layout'
import { postFilePaths, POSTS_PATH } from '../utils/mdxUtils'
export default function Index({ posts }) {
return (
<Layout>
<h1>Home Page</h1>
<p>
Click the link below to navigate to a page generated by{' '}
<code>next-mdx-remote</code>.
</p>
<ul>
{posts.map((post) => (
<li key={post.filePath}>
<Link
as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
href={`/posts/[slug]`}
>
<a>{post.data.title}</a>
</Link>
</li>
))}
</ul>
</Layout>
)
}
export function getStaticProps() {
const posts = postFilePaths.map((filePath) => {
const source = fs.readFileSync(path.join(POSTS_PATH, filePath))
const { content, data } = matter(source)
return {
content,
data,
filePath,
}
})
return { props: { posts } }
}

96
pages/posts/[slug].js Normal file
View File

@ -0,0 +1,96 @@
import fs from 'fs'
import matter from 'gray-matter'
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'
import dynamic from 'next/dynamic'
import Head from 'next/head'
import Link from 'next/link'
import path from 'path'
import CustomLink from '../../components/CustomLink'
import Layout from '../../components/Layout'
import { postFilePaths, POSTS_PATH } from '../../utils/mdxUtils'
// Custom components/renderers to pass to MDX.
// Since the MDX files aren't loaded by webpack, they have no knowledge of how
// to handle import statements. Instead, you must include components in scope
// here.
const components = {
a: CustomLink,
// It also works with dynamically-imported components, which is especially
// useful for conditionally loading components for certain routes.
// See the notes in README.md for more details.
TestComponent: dynamic(() => import('../../components/TestComponent')),
Head,
}
export default function PostPage({ source, frontMatter }) {
return (
<Layout>
<header>
<nav>
<Link href="/">
<a>👈 Go back home</a>
</Link>
</nav>
</header>
<div className="post-header">
<h1>{frontMatter.title}</h1>
{frontMatter.description && (
<p className="description">{frontMatter.description}</p>
)}
</div>
<main>
<MDXRemote {...source} components={components} />
</main>
<style jsx>{`
.post-header h1 {
margin-bottom: 0;
}
.post-header {
margin-bottom: 2rem;
}
.description {
opacity: 0.6;
}
`}</style>
</Layout>
)
}
export const getStaticProps = async ({ params }) => {
const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`)
const source = fs.readFileSync(postFilePath)
const { content, data } = matter(source)
const mdxSource = await serialize(content, {
// Optionally pass remark/rehype plugins
mdxOptions: {
remarkPlugins: [],
rehypePlugins: [],
},
scope: data,
})
return {
props: {
source: mdxSource,
frontMatter: data,
},
}
}
export const getStaticPaths = async () => {
const paths = postFilePaths
// Remove file extensions for page paths
.map((path) => path.replace(/\.mdx?$/, ''))
// Map the path into the static paths object required by Next.js
.map((slug) => ({ params: { slug } }))
return {
paths,
fallback: false,
}
}

12
posts/example-post.mdx Normal file
View File

@ -0,0 +1,12 @@
---
title: Example Post
description: This frontmatter description will appear below the title
---
This is an example post, with a [link](https://nextjs.org) and a React component:
<TestComponent name="next-mdx-remote" />
The title and description are pulled from the MDX file and processed using `gray-matter`. Additionally, links are rendered using a custom component passed to `next-mdx-remote`.
Go back [home](/).

5
posts/hello-world.mdx Normal file
View File

@ -0,0 +1,5 @@
---
title: Hello World
---
This is an example post. There's another one [here](/posts/example-post).

11
utils/mdxUtils.js Normal file
View File

@ -0,0 +1,11 @@
import fs from 'fs'
import path from 'path'
// POSTS_PATH is useful when you want to get the path to a specific file
export const POSTS_PATH = path.join(process.cwd(), 'posts')
// postFilePaths is the list of all mdx files inside the POSTS_PATH directory
export const postFilePaths = fs
.readdirSync(POSTS_PATH)
// Only include md(x) files
.filter((path) => /\.mdx?$/.test(path))

1752
yarn.lock Normal file

File diff suppressed because it is too large Load Diff