Error querying blog post by slug in Next.js project

I can see the issue! You're mixing JavaScript template literal syntax with GROQ parameters, which is causing the parsing error. In your query, you have ${slug} (JavaScript interpolation) when you should be using $slug (GROQ parameter syntax).

Here's the corrected version:

export const getSinglePost = async (
  slug: string
): Promise<PostData["data"]> => {
  const client = createClient(clientConfig);

  return await client.fetch(
    groq`
  *[_type == "post" && slug.current == $slug][0] {
      title,
      "slug":slug.current,
      "author":author->name,
      "image":image.asset->url,
      description,
      category[]->,
      toc[]->,
      body,
      publishedAt
  }
  `,
    {
      slug,
    }
  );
};

The key changes:

1. Changed ${slug} to $slug in the GROQ query
2. Removed the trailing comma after the closing brace (before the backtick)

When using GROQ parameters, you must use the $ syntax (not ${}). The parameter values are then passed as the second argument to client.fetch(), which you're already doing correctly with { slug }.

This approach is not only the correct syntax, but it's also much safer than string interpolation because it prevents GROQ injection attacks and handles proper escaping automatically. As the documentation notes, parameters are JSON literals that cannot contain GROQ expressions, making them safe even with user input.

Next.js 15 consideration: If you're using Next.js 15 with the App Router, be aware that route params are now promises, so your component needs to await them:

const BlogDetails = async ({ params }: Params) => {
  const { slug } = await params;  // await the params
  const singlePost = await getSinglePost(slug);
  return <BlogDetailsComponent postDetails={singlePost} />;
};

This is a breaking change in Next.js 15 that affects how dynamic route parameters are accessed.