content-collections icon indicating copy to clipboard operation
content-collections copied to clipboard

Next.js create app wizard generates a next-config.mjs

Open timforged opened this issue 1 year ago • 1 comments

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:

  1. Switching to ESM (import/export) as suggested by the compiler
  2. Change the file extension to .js for 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.

timforged avatar Aug 21 '24 01:08 timforged

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.mjs
  • next.config.js
  • next.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

sdorra avatar Aug 21 '24 06:08 sdorra