next js 13.3 not generating contentlayer folder after running the server

Question

Here is my next.config.js:

const { withContentlayer } = require("next-contentlayer");

module.exports = withContentlayer({
  experimental: { appDir: true },
});

Here is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "contentlayer/generated": ["./.contentlayer/generated"],
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".contentlayer/generated"
  ],
  "exclude": ["node_modules"]
}

Here is my contentlayer.config.ts:

import { defineDocumentType, makeSource } from "contentlayer/source-files";

const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      description: "The title of the post",
      required: true,
    },
    date: {
      type: "date",
      description: "The date of the post",
      required: true,
    },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
    },
  },
}));

export default makeSource({
  contentDirPath: "posts",
  documentTypes: [Post],
});

Here is my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.11",
    "@types/react": "18.0.34",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "10.4.14",
    "contentlayer": "^0.3.1",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "next": "13.3.0",
    "next-contentlayer": "^0.3.1",
    "postcss": "8.4.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.4"
  }
}

I also have a folder named posts with an example.mdx file:

---
title: Change me!
date: 2022-03-11
---

When you change a source file, Contentlayer automatically updates the content cache, which prompts Next.js to reload the content on screen.

Can you please tell me what I'm doing wrong?

I want to get my next js 13 app to generate the .contentlayer/generated folder, but when I run the program, while it doesnt give me any errors or warnings, it doesn't generate the folder either.

Answer 1

As stated from this comment on this github issue

The workaround is to run contentlayer dev also like so

{
  // ---
  "scripts": {
    "dev": "concurrently \"contentlayer dev\" \"next dev\"",
    "build": "contentlayer build && next build"
  }
  / ---
}

I have tested this to be working on the following versions

"@opentelemetry/api": "1.4.1"
"contentlayer": "0.3.1"
"next": "13.3.0"
"next-contentlayer": "0.3.1"

Answer 2

need to run yarn build first, then .contentlayer will be generated

next-contentlayer-example-main % yarn build
yarn run v1.22.19
$ next build
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

Generated 3 documents in .contentlayer
info  - Compiled successfully
info  - Linting and checking validity of types  
info  - Collecting page data  
info  - Generating static pages (6/6)
info  - Finalizing page optimization  

Route (app)                                Size     First Load JS
┌ ○ /                                      2.35 kB        76.4 kB
└ ● /posts/[slug]                          2.49 kB        71.1 kB
    ├ /posts/change-me
    ├ /posts/click-me
    └ /posts/what-is-contentlayer
+ First Load JS shared by all              68.6 kB
  ├ chunks/455-e3a12aac2a978f1a.js         66.4 kB
  ├ chunks/main-app-ffe8c8f4b33a87e6.js    202 B
  └ chunks/webpack-2dd95fcca420ebaf.js     2.01 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   179 B          84.5 kB
+ First Load JS shared by all              84.3 kB
  ├ chunks/main-fbd46419de8bf457.js        82.1 kB
  ├ chunks/pages/_app-907dedfd0e4177db.js  192 B
  └ chunks/webpack-2dd95fcca420ebaf.js     2.01 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

✨  Done in 10.34s.