Plugin

The NextGlobeGen Plugin needs to be enabled in Next.js configuration file. It sets up the required import aliases for the package to work correctly. It also regenerates the localized routes, messages and the types for the package when changes are made in the source code.

createNextGlobeGenPlugin

This function creates the wrapper function for your Next.js config object.

next.config.ts

import type { NextConfig } from "next";
import createNextGlobeGenPlugin from "next-globe-gen/plugin";

const withNextGlobeGen = createNextGlobeGenPlugin();

const nextConfig: NextConfig = {
  /* Next.js config options here */
};

export default withNextGlobeGen(nextConfig);

next.config.mjs

// @ts-check
import createNextGlobeGenPlugin from "next-globe-gen/plugin";

const withNextGlobeGen = createNextGlobeGenPlugin();

/** @type {import('next').NextConfig} */
const nextConfig: NextConfig = {
  /* Next.js config options here */
};

export default withNextGlobeGen(nextConfig);

next.config.js

// @ts-check
const createNextGlobeGenPlugin = require("next-globe-gen/plugin");

const withNextGlobeGen = createNextGlobeGenPlugin();

/** @type {import('next').NextConfig} */
const nextConfig: NextConfig = {
  /* Next.js config options here */
};

module.exports = withNextGlobeGen(nextConfig);

Parameters

createNextGlobeGenPlugin(configPath?: string);

Param	Type	Required	Description	Default
configPath	string	-	Path to a NextGlobeGen config file	./i18n.config.ts

Returns

createNextGlobeGenPlugin returns a function which will return a Next.js async config function when called with a Next.js config object as an argument.

With other plugins

If you are using other plugins that return a Next.js config object, such as @next/mdx, ensure that withNextGlobeGen is the last plugin in the call chain. This is because withNextGlobeGen returns a Next.js async config function instead of a config object.

import createMDX from "@next/mdx";
import type { NextConfig } from "next";
import createNextGlobeGenPlugin from "next-globe-gen/plugin";

const withMDX = createMDX();
const withNextGlobeGen = createNextGlobeGenPlugin();

const nextConfig: NextConfig = {
  /* Next.js config options here */
};

export default withNextGlobeGen(withMDX(nextConfig));

If you are using other plugins that do not return a Next.js config object, such as next-export-optimize-images, you might need to define your config with the async config function.

import type { NextConfig } from "next";
import createNextGlobeGenPlugin from "next-globe-gen/plugin";
import withExportOptimizeImages from "next-export-optimize-images";

const withNextGlobeGen = createNextGlobeGenPlugin();

export default async function (phase: any) {
  const nextConfig: NextConfig = {
    /* Next.js config options here */
  };
  const config = await withExportImages(nextConfig);
  return withNextGlobeGen(config)(phase);
}