I have just started learning Next.js and I am running into this warning in my terminal.

Error: Route "/users/[userId]" used `params.userId`. `params` should be awaited before using its properties.

I try to await the params (which doesnt work) or deconstructing it in the function but I keep getting the same warning?

app/users/pages.tsx

    import getUser from "@/lib/getUser";
import getUserPosts from "@/lib/getUserPosts";
import { Suspense } from "react";
import UserPosts from "./components/UserPosts";
import type { Metadata } from "next";

type Params = {
  params: {
    userId: string;
  };
};

export async function generateMetadata({
  params: { userId },
}: Params): Promise<Metadata> {
  const userData: Promise<User> = getUser(userId);

  const user: User = await userData;

  return {
    title: user.name,
    description: `This is the page of ${user.name}`,
  };
}

export default async function UserPage({ params: { userId } }: Params) {
  const userData: Promise<User> = getUser(userId);
  const userPostsData: Promise<Post[]> = getUserPosts(userId);

  // const [user, userPosts] = await Promise.all([userData, userPostData])

  const user = await userData;

  return (
    <>
      <h2>{user.name}</h2>
      <br />
      <Suspense fallback={<h2>Loading...</h2>}>
        <UserPosts promise={userPostsData} />
      </Suspense>
    </>
  );
}

I'm learning on a course using [email protected]

I have just started learning Next.js and I am running into this warning in my terminal.

Error: Route "/users/[userId]" used `params.userId`. `params` should be awaited before using its properties.

I try to await the params (which doesnt work) or deconstructing it in the function but I keep getting the same warning?

app/users/pages.tsx

    import getUser from "@/lib/getUser";
import getUserPosts from "@/lib/getUserPosts";
import { Suspense } from "react";
import UserPosts from "./components/UserPosts";
import type { Metadata } from "next";

type Params = {
  params: {
    userId: string;
  };
};

export async function generateMetadata({
  params: { userId },
}: Params): Promise<Metadata> {
  const userData: Promise<User> = getUser(userId);

  const user: User = await userData;

  return {
    title: user.name,
    description: `This is the page of ${user.name}`,
  };
}

export default async function UserPage({ params: { userId } }: Params) {
  const userData: Promise<User> = getUser(userId);
  const userPostsData: Promise<Post[]> = getUserPosts(userId);

  // const [user, userPosts] = await Promise.all([userData, userPostData])

  const user = await userData;

  return (
    <>
      <h2>{user.name}</h2>
      <br />
      <Suspense fallback={<h2>Loading...</h2>}>
        <UserPosts promise={userPostsData} />
      </Suspense>
    </>
  );
}

I'm learning on a course using [email protected]

• reactjs
• typescript
• next.js
• react-typescript

• 1 Please check nextjs version. This warning should not come before nextjs 15 – Tushar Shahi Commented Feb 16 at 12:42
• Ahh yes, thank you! Im not sure why it was the latest version as I installed the 13.2.1 version, but its all working now – Neelam Commented Feb 16 at 12:53

1 Answer 1

import getUser from "@/lib/getUser";  
import getUserPosts from "@/lib/getUserPosts";  
import { Suspense } from "react";  
import UserPosts from "./components/UserPosts";  
import type { Metadata } from "next";  

type Params = {  
  params: {  
    userId: string;  
  };  
};  

export async function generateMetadata({ params }: Params): Promise<Metadata> {  
  const userData: Promise<User> = getUser(params.userId);  

  const user: User = await userData;  

  return {  
    title: user.name,  
    description: `This is the page of ${user.name}`,  
  };  
}  

export default async function UserPage({ params }: Params) {  
  const userData: Promise<User> = getUser(params.userId);  
  const userPostsData: Promise<Post[]> = getUserPosts(params.userId);  

  const user = await userData;  

  return (  
    <>  
      <h2>{user.name}</h2>  
      <br />  
      <Suspense fallback={<h2>Loading...</h2>}>  
        <UserPosts promise={userPostsData} />  
      </Suspense>  
    </>  
  );  
}

You can also check this answer, from the question and answer link:

export default async function RootLayout({
  children,
  params,
}: RootLayoutProps) {
  const { lang } = await params

  return (
    <html lang={lang}>
      <body>{children}</body>
    </html>
  )
}

there is a similar question & answer is here: Same question and answer as well

please check before posting.