next config file now has .mjs instead of .js?

[BearCooder]

Summary

Hi, I noticed that the recent next version after installing from scratch, has next.config.mjs instead of next.config.js?
What is the reason for this change?

I noticed this due to the error ReferenceError: require is not defined in ES module scope, you can use import instead
This is the default config I use in order to use next-intl library:

/** @type {import('next').NextConfig} */
const withNextIntl = require('next-intl/plugin')('./i18n/i18n.ts');

module.exports = withNextIntl({});

Changing from .mjs to .js solves this problem. But I am curious why the change?

Additional information

No response

Example

No response

[joulev]

require and module.exports are invalid in ES modules (.mjs files). If you do use .mjs you need to use module import and export statements. For your config file that would be

import nextIntl from 'next-intl/plugin';

const withNextIntl = nextIntl('./i18n/i18n.ts');

export default withNextIntl({});

[zacBkh]

Hello!
Thanks a lot but I have personnally two things to export from this config file, internationalization (withNextIntl) but also something for PWA support (serwist)
I don't manage to find the syntax

[joulev]

@zacBkh This maybe, I have never used either of them before

import nextIntl from 'next-intl/plugin';
import withSerwistInit from "@serwist/next";

const withNextIntl = nextIntl('./i18n/i18n.ts');
const withSerwist = withSerwistInit({
    swSrc: "app/sw.ts",
    swDest: "public/sw.js",
});

export default withSerwist(withNextIntl({}));

[ISHA50]

Hey, can you help me? I'm building documentation using Nextra. I fixed the previous error as you suggested, but now I'm encountering another error. I'm not sure how to resolve it .
Error.pdf

[joulev]

@ISHA50 That error doesn’t look related to the main topic in this thread, but rather related to Nextra itself. Please seek help in a Nextra support community.

[ayushghatkar8080]

import { withSentryConfig } from "@sentry/nextjs";
/* @type {import('next').NextConfig} */
import { withNextVideo } from "next-video/process";

const nextConfig = {
images: {
remotePatterns: [
{
hostname: "zyx.asdsad.com",
},
],
},
};

export default withSentryConfig(withNextVideo(nextConfig),
{
silent: true,
org: "org-name",
project: "pro-name",
},
{
widenClientFileUpload: true,
transpileClientSDK: true,
hideSourceMaps: true,
disableLogger: true,
automaticVercelMonitors: true,
}
);

hostname "zyx.asdsad.com" is not configured under images in your next.config.js

[BrandoWeaver]

Is anyone able to help me set the customer header title in Nextjs 14?  when i change the page. when i check in nextjs document they provide to change in next config file but i still see localhost as my header tittle, can you help me with this ?

[keithmanilla]

Just change module.exports = nextConfig into export default nextConfig;:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

export default nextConfig;