Migration from `next.config.js` to `next.config.mjs`

[Noman-Nom]

Description

When upgrading to the latest version of Next.js, you may need to convert your existing next.config.js file to the new ES Module format as next.config.mjs. This issue provides a guideline for making this transition smoothly.

Problem

If you're using a tutorial or codebase that includes a next.config.js file, you might encounter issues when trying to use it in the latest version of Next.js, which supports ES Modules.

Solution

Here's how to convert your next.config.js to next.config.mjs:

1. Replace module.exports with ES Module export syntax.
2. Use export default instead of module.exports.

Example

Here’s an example of how to convert a typical next.config.js file to next.config.mjs:

Original next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ["mongoose"],
  },
  images: {
    domains: ['lh3.googleusercontent.com'],
  },
  webpack(config) {
    config.experiments = {
      ...config.experiments,
      topLevelAwait: true,
    }
    return config
  }
}

module.exports = nextConfig

####Converted next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ["mongoose"],
  },
  images: {
    domains: ['lh3.googleusercontent.com'],
  },
  webpack(config) {
    config.experiments = {
      ...config.experiments,
      topLevelAwait: true,
    }
    return config
  }
}

export default nextConfig```

[Noman-Nom]

you can use this next.config.mjs

[Hemanth12-git]

u can safely remove appDir = true in the file as the current next.js documentation states that it is deprecated or removed from.