Using next-intl Plugin with ES Modules in Next.js Configuration

[MarcIsCoding]

Hello everyone,

EDIT: This solution applies to v2.15.0-beta.5, see the comment below: #324 (reply in thread)

I wanted to share my experience integrating the next-intl plugin with a Next.js project using ES modules (mjs) for the configuration file.

NOTE: I understand that this may be an obvious solution to an obvious problem for some, but then you wouldn't be here if it wasn't something you are trying to solve!

Initially, I faced an error when trying to import the next-intl/plugin directly, which was due to the package not exporting the subpath for ES modules. Here's the solution that worked for me.

In the next.config.mjs file, I imported next-intl and used it to extend my Next.js configuration. Below is an example:

import nextIntl from "next-intl/plugin";

// Your existing Next.js configuration
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  images: {
    domains: ["tailwindui.com"],
  },
};

// Use nextIntl to extend your configuration with the next-intl plugin
const withNextIntl = nextIntl("./i18n.ts");

export default withNextIntl(nextConfig);

Please make sure that the path ./i18n.ts is correctly pointing to your internationalization configuration.

Keep in mind that while this approach worked for me, there might be other solutions or best practices.

I hope this helps anyone facing a similar issue! Feedback and alternative solutions are welcome.

[Alirezaebrahimi77]

This really helped me, thank you! 🙏

[DanielWeidinger]

I don't get how you imported the next-intl/plugin module when it's neither exported nor present in the package. At least in the newest version(2.19.1). Am I missing something?

[Alirezaebrahimi77]

Make sure your file name is next.config.mjs not next.config.js

[DanielWeidinger]

I already tried this and it didn't change the import issue.

[Aeonitas]

fr

[MarcIsCoding]

@DanielWeidinger, I believe the primary issue might stem from the version differences. In our project, we've been using the version ^2.15.0-beta.5 of the library. I'll explain why further below.

If you are using this version, and still having issues, it's possibly due to the import method in next.config.mjs, we're using a default import. A named import, in this case, will not work:

✅ import nextIntl from "next-intl/plugin"
❌ import { nextIntl } from "next-intl/plugin"

Why the Beta Version?
During our project's early stages, the app router's complete support wasn't ironed out. From what I remember, adopting the beta version was the only course of action.

We've since moved on from actively maintaining that project. However, out of curiosity, I did try the latest stable version v2.20.0. It didn't work. Interestingly, using v3.0.0-beta.16 also resulted in a failure, but due to a middleware-related issue this time:

./node_modules/next-intl/dist/development/middleware/middleware.js
Module parse failed: Identifier 'NextResponse' has already been declared (3:6)

If I revisit the app or work with next-intl on any ongoing projects, I'll certainly keep tabs on this discussion and contribute further where possible.

Lastly, I'll update my original post to highlight the version we've been using - which would have been helpful from the start! (apologies.)

[amannn]

The installation instructions now cover next.config.mjs!

[MarcIsCoding]

Awesome! I just looked at the docs - they look amazing, great job!

[amannn]

Thank you for sharing your solution here! 🙌