Bug or wrong using ? - Application refresh causes 404 #1416

Tockra · 2024-10-10T16:47:12Z

Tockra
Oct 10, 2024

Hello,

I'm using Next.js and next-intl in my application. I'm building a Docker image for this application, but something goes wrong during the process.

When I run the server and visit some (not all) pages and refresh them, I end up on a 404 page, and I see two error messages.
While routing to the page there is no issue. Only if I refresh the already loaded page.
On the client side:

Client-side Error Messages

positions:1 
 GET https://mydomain.de/de/factura/positions 500 (Internal Server Error)
2117-d609e2352cd55104.js:1 Error: No authority or metadataUrl configured on settings
    at R.getMetadata (8761-1c58649a77053b7a.js:1:40374)
    at R._getMetadataProperty (8761-1c58649a77053b7a.js:1:41513)
    at R.getAuthorizationEndpoint (8761-1c58649a77053b7a.js:1:40883)
    at J.createSigninRequest (8761-1c58649a77053b7a.js:1:60846)
    at Object._signinStart (8761-1c58649a77053b7a.js:1:87045)
    at Object.signinRedirect (8761-1c58649a77053b7a.js:1:81927)
    at async Object.signinRedirect (8761-1c58649a77053b7a.js:1:92864)
favicon.ico:1 
 GET https://mydomain.de/favicon.ico 404 (Not Found)

I'm not sure, but perhaps this problem is caused by Next.js because, at the same time, the server console says:

Server Console Output

fe-1  |
fe-1  | Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The `notFound()` function will be called as a result.
fe-1  |

I followed the documentation exactly:

`src/middleware.ts`

View Code

import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";

export default createMiddleware(routing);

export const config = {
  // Match only internationalized pathnames
  matcher: ["/", "/(de)/:path*"],
};

`src/i18n/request.ts`

View Code

import { notFound } from "next/navigation";
import { getRequestConfig } from "next-intl/server";
import { routing } from "./routing";

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!routing.locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../../messages/${locale}.json`)).default,
  };
});

export type LocaleParam = {
  locale: string;
};
export type GenerateMetadataProps = {
  params: LocaleParam;
};

`src/i18n/routing.ts`

View Code

import { defineRouting } from "next-intl/routing";
import { createSharedPathnamesNavigation } from "next-intl/navigation";

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: ["de"],

  // Used when no locale matches
  defaultLocale: "de",
});

// Lightweight wrappers around Next.js' navigation APIs
// that will consider the routing configuration
export const { Link, redirect, usePathname, useRouter } =
  createSharedPathnamesNavigation(routing);

`src/app/[locale]/layout.tsx`

View Code

import "../globals.css";
import { AuthProviderWrapper } from "@/auth/provider-wrapper";
import { RedirectToLoginPage } from "@/auth/redirect-to-login";
import { NextIntlClientProvider, useMessages } from "next-intl";

import { StyledEngineProvider } from "@mui/material/styles";
import { Toaster } from "react-hot-toast";
import CssBaseline from "@mui/material/CssBaseline";
import { UserSettingsProvider } from "@/contexts/user-settings-context";
import { SidebarLayout } from "@/components/sidebar/sidebar-layout";
import { PropsWithChildren } from "react";

import { PublicEnvScript } from "next-runtime-env";

export default function RootLayout({
  children,
  params: { locale },
}: PropsWithChildren<{ params: { locale: string } }>) {
  const messages = useMessages();

  return (
    <StyledEngineProvider injectFirst>
      <AuthProviderWrapper>
        <html lang={locale}>
          <head>
            <PublicEnvScript />
          </head>
          <body>
            <RedirectToLoginPage>
              <NextIntlClientProvider messages={messages}>
                <UserSettingsProvider>
                  <SidebarLayout locale={locale}>
                    <CssBaseline />
                    <Toaster position="top-center" />
                    {children}
                  </SidebarLayout>
                </UserSettingsProvider>
              </NextIntlClientProvider>
            </RedirectToLoginPage>
          </body>
        </html>
      </AuthProviderWrapper>
    </StyledEngineProvider>
  );
}

`src/app/[locale]/not-found.tsx`

View Code

import { useTranslations } from "next-intl";

export default function NotFoundPage() {
  const t = useTranslations("NotFoundPage");
  return <h1>{t("title")}</h1>;
}

`next.config.mjs`

View Code

import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        // ...
      },
    ],
  },
  output: "standalone",
  swcMinify: false,
  env: {
    BUILD_TIME: new Date().toISOString(),
  },
  webpack: config => {
    config.resolve.alias.canvas = false;
    return config;
  },
};

export default withNextIntl(nextConfig);

My problem only occurs in the Docker file I build on my x86 system, so maybe it is related. On an ARM system, the file doesn't work because there's a specific x86 app included (Google Chrome):

`Dockerfile`

View Code

ARG FRONTEND_TEST_RUNNER_BASE_IMAGE

# Use the ARG as the image
FROM ${FRONTEND_TEST_RUNNER_BASE_IMAGE} AS base

WORKDIR /app

ENV NODE_ENV=production
# Uncomment the following line if you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN apt-get update && apt-get install -y \ 
  libcairo2-dev \
  libpango1.0-dev \
  libjpeg-dev \
  libgif-dev \
  librsvg2-dev

RUN apt-get update \
  && apt-get install -y wget gnupg \
  && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
  && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
  && apt-get update \
  && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
    --no-install-recommends \
  && rm -rf /var/lib/apt/lists/*

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY ./public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

RUN mkdir /tmp/.chrome
RUN chown nextjs:nodejs /tmp/.chrome
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --chown=nextjs:nodejs ./.next/standalone ./
COPY --chown=nextjs:nodejs ./.next/static ./.next/static
COPY --chown=nextjs:nodejs ./node_modules/pdfjs-dist/build/* /app/node_modules/pdfjs-dist/build/

USER nextjs

EXPOSE 3000
ENV PORT=3000

ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome
ENV XDG_CONFIG_HOME=/tmp/.chrome
ENV XDG_CACHE_HOME=/tmp/.chrome

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]

The build occurs in a GitLab pipeline and is pushed to the worker building the Docker image through the artifacts function. The build itself:

GitLab CI Configuration

View Code

build-frontend-nextjs:
  stage: build
  image: $FRONTEND_TEST_RUNNER_BASE_IMAGE
  retry: 2
  before_script:
    - apt-get update && apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev curl
    - corepack enable
    - cd ./<PLACEHOLDER>-web/
    - rm -fr node_modules
    - export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
  script:
    - npm ci
    - npm run build
  rules:
    - if: "$CI_COMMIT_TAG"
      changes:
        - ./<PLACEHOLDER>-web/**
  artifacts:
    untracked: true
    paths:
      - <PLACEHOLDER>-web/node_modules/
      - <PLACEHOLDER>-web/.next/
    expire_in: 1 day

Do anybody has an idea where the problem comes from or is it a next-intl bug? Or maybe it is not related with next intl at all???

T

Tockra · 2024-10-10T16:54:54Z

Tockra
Oct 10, 2024
Author

Maybe only the favicon is related to next-intl.
But even then I would like to now, why a not loaded page (404) results in a a poll of mydomain.de/favicon and why does the middleware have a problem there?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug or wrong using ? - Application refresh causes 404 #1416

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Bug or wrong using ? - Application refresh causes 404 #1416

Tockra Oct 10, 2024

src/middleware.ts

src/i18n/request.ts

src/i18n/routing.ts

src/app/[locale]/layout.tsx

src/app/[locale]/not-found.tsx

next.config.mjs

Dockerfile

GitLab CI Configuration

Replies: 1 comment

Tockra Oct 10, 2024 Author

Tockra
Oct 10, 2024

`src/middleware.ts`

`src/i18n/request.ts`

`src/i18n/routing.ts`

`src/app/[locale]/layout.tsx`

`src/app/[locale]/not-found.tsx`

`next.config.mjs`

`Dockerfile`

Tockra
Oct 10, 2024
Author