In a NextJS project, the next-intl library was used to implement internationalization features. The project was built and ran normally in the development environment, but problems occurred when attempting to deploy it to Github Pages.

Problem Description

After adding generateStaticParams in the app/[locale]/layout.tsx file and unstable_setRequestLocale in all layout and page files to implement the next-intl functionality, an error Error: TypeError: error must be an instance of Error occurred during the build process on Github. In the main /app/[locale]/page.tsx file, unstable_setRequestLocale could not be called because "use client" was used. The build was normal in the development environment, but this error was thrown when pushing to Github.

Here is a code example of the app/[locale]/layout.tsx file:

import { Inter } from "next/font/google";
import "./globals.css";
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { unstable_setRequestLocale } from "next-intl/server";
const locales = ["en", "pt"];
export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}
const inter = Inter({ subsets: ["latin"] });
export default async function RootLayout({
  children,
  params: { locale },
}: Readonly<{ children: React.ReactNode; params: { locale: string } }>) {
  unstable_setRequestLocale(locale);
  const messages = await getMessages();
  return (
    <html lang={locale}>
      <body className={inter.className}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Troubleshooting Process

After analysis, it was found that the problem might be related to the configuration of the Github Action. When using the standard NextJS workflow of Github Action, the static_site_generator: next configuration option might conflict with the relevant settings of next-intl.

Here is an example of the incorrect code (taking the Github Action workflow file as an example):

# Partial example of the workflow file
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
     -name: Build with Next.js
        with:
          static_site_generator: next

Solutions

Remove the Configuration Option

If you are using the standard NextJS workflow of Github Action, you can solve the problem by removing the option.

with:
  static_site_generator: next

Summary and Reflection

This problem was mainly caused by the conflict between the Github Action configuration and the settings of the next-intl library. When using third-party libraries and automated deployment tools, attention should be paid to their compatibility. When encountering deployment issues, carefully check the relevant configuration files and troubleshoot possible conflicting options. To avoid similar problems, it is recommended to conduct sufficient tests in the test environment before introducing new libraries or tools to ensure their compatibility with the existing project.

Problem Description
Troubleshooting Process
Solutions
Remove the Configuration Option
Summary and Reflection