diff --git a/README.md b/README.md index 46551f7..c94a808 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ ## Local setup ```bash -npm install -npm run dev +yarn +yarn dev ``` Open [https://localhost:3000](https://localhost:3000) with your browser to see the result. (Note the webserver is using a self-signed SSL certificate since HTTPS is required for the embedded Stackblitz editor to work properly.) diff --git a/content/docs/100-getting-started/index.mdx b/content/docs/100-getting-started/index.mdx index 5cdc288..9bc1e41 100644 --- a/content/docs/100-getting-started/index.mdx +++ b/content/docs/100-getting-started/index.mdx @@ -57,6 +57,19 @@ const nextConfig = { reactStrictMode: true, swcMinify: true } module.exports = withContentlayer(nextConfig) ``` +If your project uses TypeScript, you'll also want to run `contentlayer build` prior to `next build`. + +```json +// package.json +{ + "scripts": { + "build": "contentlayer build && next build" + } +} +``` + +See the [Next.js documentation](/docs/environments/nextjs) for more details on why this is required. + ### TypeScript Configuration Then add the following lines to your `tsconfig.json` or `jsconfig.json` file: diff --git a/content/docs/400-environments/100-nextjs.mdx b/content/docs/400-environments/100-nextjs.mdx index 4653399..3e5f2eb 100644 --- a/content/docs/400-environments/100-nextjs.mdx +++ b/content/docs/400-environments/100-nextjs.mdx @@ -8,20 +8,60 @@ Contentlayer has full support for Next.js projects, including live reloading (if ## Installation & Configuration +### Updating `next.config.js` + Using Contentlayer in a Next.js project is easiest if you use the [`next-contentlayer`](/docs/reference/next-contentlayer) plugin. Install the plugin: ```txt npm install next-contentlayer ``` -Then wrap your next configuration object in the [`withContentlayer` utility](/docs/reference/next-contentlayer#withcontentlayer). +Then wrap your `next.config.js` configuration object in the [`withContentlayer` utility](/docs/reference/next-contentlayer#withcontentlayer). This starts the contentlayer dev server along with the Next.js dev server. ```js // next.config.js -import { withContentlayer } from 'next-contentlayer' +const { withContentlayer } = require('next-contentlayer') export default withContentlayer({}) ``` +### Building for Production + +If your project uses TypeScript, you must run `contentlayer build` prior to `next build`. + +```json +// package.json +{ + "scripts": { + "build": "contentlayer build && next build" + } +} +``` + +This is necessary because Next.js does not always runs Typescript type-checking (`tsc`) prior to plugins specified in `next.config.ts`. If you don't run `contentlayer build` first, type-checking will fail in typical CI environments. + +**Note**: This actually runs contentlayer to twice: once from `contentlayer build` and once from `next build`. To further optimize this, you could add logic to `next.config.js` to run contentlayer only in the dev server. + +```js +// next.config.js +const { withContentlayer } = require('next-contentlayer') +const { PHASE_DEVELOPMENT_SERVER } = require('next/constants') + +const nextConfig = { + // Your config goes here... +} + +module.exports = (phase) => { + if (phase === PHASE_DEVELOPMENT_SERVER) { + // Only run contentlayer in dev server + // Skip contentlayer in production builds since it is already run by `contentlayer build` prior to `next build`. + // PHASE_DEVELOPMENT_SERVER is not documented in Next.js docs, but you can find it in various sources such as https://github.com/vercel/next.js/issues/37269. + return withContentlayer(nextConfig) + } + + return nextConfig +} +``` + ## App Directory Contentlayer is now optimized for use with React server components (RSC) within the `app` directory, which was introduced in Next 13. Learn more in [the Next beta docs](https://nextjs.org/docs/app/api-reference/file-conventions/metadata). diff --git a/src/components/landing-page/FAQ.tsx b/src/components/landing-page/FAQ.tsx index 86e2af9..64ad1e1 100644 --- a/src/components/landing-page/FAQ.tsx +++ b/src/components/landing-page/FAQ.tsx @@ -25,7 +25,7 @@ const content = { primaryAction: { label: 'Read more in docs', url: '/docs/other/faq' }, secondaryAction: { label: 'Ask a question', - url: 'https://github.com/contentlayerdev/contentlayer/issues/new', + url: 'https://discord.gg/rytFErsARm', icon: 'external-link' as IconName, }, }