Next-intl not working on next.js-15.0.3 version #1592

rznkolds · 2024-12-03T15:29:00Z

Description

I have constantly reviewed my code, visited various sites, looked at the documentation, but it only works without i18n routing.

This is my next.config.ts file :

const withNextIntl = createNextIntlPlugin('@/languages/i18n/request.ts');

const nextConfig: NextConfig = {

};

export default withNextIntl(nextConfig);

This is my middleware.ts file :

export { auth as middleware } from "@/utils/authorization";
import createMiddleware from 'next-intl/middleware';
import {routing} from '@/languages/i18n/routing';

export default createMiddleware(routing);

export const config = {

    matcher: ["/", "/(en|tr)/:path*"],
};

This my request.ts file in i18n folder :

import {getRequestConfig} from 'next-intl/server';
import {routing} from './routing';

export default getRequestConfig(
    async ({requestLocale}) => {

        let locale = await requestLocale;


        if (!locale || !routing.locales.includes(locale as any)) locale = routing.defaultLocale;

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

This my routing.ts file in i18n folder :

import {defineRouting} from 'next-intl/routing';
import {createNavigation} from 'next-intl/navigation';

export const routing = defineRouting({

    locales: ['en', 'tr'],

    defaultLocale: 'en'
});

export const {Link, redirect, usePathname, useRouter, getPathname} = createNavigation(routing);

This is my layout file in src/app/[locale] folder :

import type {Metadata} from "next";
import "@/styles/global.css";
import Navigation from "@/components/common/navigation/Navigation";
import Footer from "@/components/common/footer/Footer";
import {Inter} from "next/font/google";
import React from "react";
import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';
import {notFound} from 'next/navigation';
import {routing} from '@/languages/i18n/routing';

const inter = Inter({subsets: ["latin"]});

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by signup next (app)",
};

export default async function RootLayout (
    {
        children,
        params
    }: {
        children: React.ReactNode;
        params: Promise<{ locale: string }>;
    }
) {

    const locale = (await params).locale

    if (!routing.locales.includes(locale as any)) notFound();

    const messages = await getMessages();

    return (
        <html lang={locale} suppressHydrationWarning>
               <body className={inter.className}>
                       <NextIntlClientProvider messages={messages}>
                               <Navigation/>
                               {
                                      children
                               }
                               <Footer/>
                       </NextIntlClientProvider>
               </body>
        </html>
    );
}

For some reason, the data changes only when the default locale section in the routing file is changed, otherwise the data does not change when the language code is specified in the url section.

Verifications

I've verified that the problem I'm experiencing isn't covered in the docs.
I've searched for similar, existing issues on GitHub and Stack Overflow.
I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/rznkolds/test.git

Reproduction description

Steps to reproduce:

Start project
Click the search bar
Change language code

Expected behaviour

When the language code in the URL section changes, the page language must also change.

amannn · 2024-12-04T10:07:16Z

Your middleware is in the wrong folder. You need to move it to src if you use that folder (see the docs).

rznkolds · 2024-12-05T19:39:00Z

@amannn Isn't there a way to define a path for this because as far as I know, the middleware file in next.js projects is generally not located under the src folder ?

The middleware file is usually defined under the root directory.

amannn · 2024-12-06T06:59:28Z

Next.js defines the convention on where a middleware needs to be put. And currently that contains that if you have a src folder, you need to put the middleware there.

I'm closing this since this is not actionable for next-intl.

rznkolds added bug Something isn't working unconfirmed Needs triage. labels Dec 3, 2024

amannn closed this as completed Dec 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next-intl not working on next.js-15.0.3 version #1592

Next-intl not working on next.js-15.0.3 version #1592

rznkolds commented Dec 3, 2024

amannn commented Dec 4, 2024 •

edited

Loading

rznkolds commented Dec 5, 2024 •

edited

Loading

amannn commented Dec 6, 2024

Next-intl not working on next.js-15.0.3 version #1592

Next-intl not working on next.js-15.0.3 version #1592

Comments

rznkolds commented Dec 3, 2024

Description

Verifications

Mandatory reproduction URL

Reproduction description

Expected behaviour

amannn commented Dec 4, 2024 • edited Loading

rznkolds commented Dec 5, 2024 • edited Loading

amannn commented Dec 6, 2024

amannn commented Dec 4, 2024 •

edited

Loading

rznkolds commented Dec 5, 2024 •

edited

Loading