Just started learning next js and ran into this problem. When I click on view profile i get a not found page and not the desired userDetailsPage. Not getting the params.

My folder structure is like this

app/
    blog/
        page.tsx
        [slug]/
                page.tsx
                [userId]/
                        page.tsx

            

The code for the blog/page.tsx is

const BlogPage = async () => {
  const posts = await getData();
  return (
    <div className="grid grid-cols-4 gap-7 ">
      {posts.map((post: Posts) => (
        <div
          key={post.id}
          className="bg-slate-500 text-white p-7 flex flex-col justify-between items-center gap-4"
        >
          <h1>{post.title}</h1>
          <Link
            className="bg-yellow-500 text-white p-3 rounded-md"
            href={`/blog/${post.id}`}
          >
            Read More..
          </Link>
        </div>
      ))}
    </div>
  );
};
export default BlogPage;

The code for [slug]/page.tsx is

const SinglePostPage = async ({ params }: SinglePostPageProps) => {
  const post = await getSinglePost(params.slug);
  const user = await getUser(post.userId);

  return (
    <div className="bg-slate-500 p-7">
      <h1 className="text-3xl font-bold py-4">{post.title}</h1>
      <p>{post.body}</p>
      <div>By {user.name}</div>
      <Link href={`/user/${user.id}`}>View Profile</Link>
    </div>
  );
};

export default SinglePostPage;

And the code for [userId]/page.tsx is

import React from "react";

const UserDetails = ({ params }) => {
  return (
    <div>
      <h1>User Id: {params.userId}</h1>
    </div>
  );
};

export default UserDetails;