Next.js create app wizard generates a next-config.mjs
npx create-next-app@latest seems to generate a next.config.mjs by default.
The Next.js quickstart assumes the config exists as next.config.js.
If the file extension remains as .mjs it is treated as ESM rather than CJS which produces a build error:
const { withContentCollections } = require("@content-collections/next");
ReferenceError: require is not defined in ES module scope, you can use import instead
I am not sure how obvious this may be to the more seasoned developers, but the easy fix:
- Switching to ESM (import/export) as suggested by the compiler
- Change the file extension to
.jsfor CJS - thus validating the quickstart code snippet
An early apology if I am missing something obvious, I am fairly new to the open-source world and would love to contribute to this project.
Yes, you are absolutely right. We should change the documentation and use next.config.mjs with esm syntax for the code snippets.
Or we could use tabs, with one for each type of configuration:
next.config.mjsnext.config.jsnext.config.ts
I think we should start by switching to next.config.mjs.
If you would like to contribute, you could update the documentation at the docs folder. If you want to test your changes locally:
pnpm install
cd website
pnpm turbo dev