I am trying to link to the single blog post but dynamic routes in the Link href no longer work in the app directory. I have created a route in the following structure: app - posts - [post] - page.tsx
Here is the code for the blogList:

import Link from "next/link";
import { getPosts } from "../../sanity/sanity.utils";
import BlockContent from "@sanity/block-content-to-react";

const BlogList = async () => {
  const posts = await getPosts();
  return (
    <div className="custom-container pb-12 flex flex-row gap-10">
      {posts.map((post) => (
        <a href={`/posts/${post.slug}`} target="_blank" rel="noreferrer">
            <div  className="card shadow-lg p-3 max-w-lg w-[400px]">
                <h2 className="text-center mb-5 text-xl font-bold">{post.title}</h2>
                <img
                    src={post.image}
                    alt={post.alt}
                    className="h-auto w-[280px] max-w-lg rounded-lg text-center mx-auto hover:scale-105 transition"
                />
                <p className="text-right mt-5">
                {/* <BlockContent blocks={post.body} projectId={"g91temd2"}
  dataset={"production"} /> */}
                    Read More...
                </p>
            </div>
        </a>
      ))}
    </div>
  );
};

export default BlogList;

Here is page.tsx mentioned above:

import { getPost } from "../../../sanity/sanity.utils";

type Props = {
    params: {post: string}
}

export default async function Post({ params }: Props) {
    const slug = params.post;
    const post = await getPost(slug);
    return (
        <div> {post.title}</div>
    )
}