instructions to run contentlayer build prior to next build

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.)

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:

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).

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,
   },
 }