Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties

I’m working on a Next.js 15 app using the new App Router (app directory) with dynamic route localization. I have a [locale] directory where I handle multiple language routes, and I use the params object to access the locale value. However, I keep getting the following error when trying to access params.locale:

Error: Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at locale (webpack:///app/[locale]/layout.tsx?a262:30:34)

Code Structure
Here’s the structure of my app:

app/
├── [locale]/
│   ├── layout.tsx            // Root layout for [locale] dynamic route
│   └── page.tsx              // Main page component for [locale] dynamic route
locales/
├── en/
│   └── common.json           // English translations
├── lt/
│   └── common.json           // Lithuanian translations
i18Config.js                  // i18n configuration with available locales
i18n.js                       // i18n initialization file
TranslationsProvider.js       // Translation provider component
middleware.js                 // Middleware to handle locale-based redirection

In app/[locale]/layout.tsx, I want to access the locale value from params and pass it to different components. I have tried various ways to access params, but the error persists.

Here’s what my layout.tsx file looks like:

import "@/styles/global.css";
import { Outfit } from "next/font/google";
import { Providers } from "./providers";
import i18nConfig from "../../i18nConfig";
import { dir } from "i18next";

const outfit = Outfit({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800"],
  style: ["normal"],
});

export function generateStaticParams() {
  return i18nConfig.locales.map((locale) => ({ locale }));
}

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  return (
    <html
      lang={locale}
      dir={dir(locale)}
      suppressHydrationWarning
      className={outfit.className}
    >
      <body className="bg-background">
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
  1. Accessing params directly in the function body: I’ve moved params.locale to a separate constant in the function body, but the error still appears.
  2. Using generateStaticParams: I added generateStaticParams to pre-generate routes for the available locales (en and lt). This didn’t resolve the error either.
  3. Type Adjustments: I created a custom type for params to ensure TypeScript knows the structure of params (i.e., params: { locale: string }).

The error suggests that params should be "awaited," even though params is an object and not a promise, so await params doesn’t make sense here.
I’ve seen other posts mentioning that destructuring in async functions can cause issues with params in Next.js, but accessing params directly also didn’t work for me.
Restarting the server after every change didn’t resolve the issue either.

How can I correctly access params.locale in a dynamic route layout without getting this error? Is there a workaround or configuration I’m missing? Any insight would be greatly appreciated. Thank you!

Tags:

2

Answers


  1. 0

    you can use "use" hook to properly await the params to resolve this. Here is an example:

    import { use } from "react";

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

    let me know if it works for you.

    Login or Signup to reply.
  2. 0

    You should await params, like:

    export async function POST(request: Request, { params }: { params: Promise<{ unit_id: string }> }) {

    and then:

    const { unit_id: unitId } = await params

    for example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search