Error During bun run build After Upgrading to Next.js 15

I recently upgraded my project to Next.js 15, and while everything works fine in the local development environment, I encounter an error when running the build command using bun run build.

Here’s the error message I’m seeing: enter image description here

Here is my current project setup:

import { getBlogPosts } from "@/app/db/posts";
import { Tag } from "@/components/tag";
import { nonAccentVietnamese } from "@/lib/non-accent-vietnamese";
import { getAllTags, getPostsByTagSlug, sortTagsByCount } from "@/lib/tags";
import { Metadata } from "next";
import WritingList from "@/components/writing-list";
import { getItemsByYear } from "@/lib/utils";
import PageHeader from "@/components/page-header";

interface TagPageProps {
  params: {
    tag: string;
  };
}

export async function generateMetadata({
  params,
}: TagPageProps): Promise<Metadata> {
  const { tag } = params;
  const siteUrl = `/tags/${tag}`;
  const seoTitle = `Topic "${tag}"`
  const seoDescription = `Posts on the topic of ${tag}`

  return {
    title: seoTitle,
    description: seoDescription,
    keywords: [
      seoTitle,
      seoDescription
    ],
    openGraph: {
      title: seoTitle,
      description: seoDescription,
      url: siteUrl,
      images: siteUrl + "/og.png",
    },
    alternates: {
      canonical: siteUrl,
    },
  };
}

export const generateStaticParams = async () => {
  const posts = await getBlogPosts();
  const tags = getAllTags(posts);
  const paths = Object.keys(tags).map((tag) => ({ tag: nonAccentVietnamese(tag) }));
  return paths;
};

export default function TagPage({ params }: TagPageProps) {
  const { tag } = params;
  const title = tag.split("-").join(" ");
  const posts = getBlogPosts();
  const allPosts = getPostsByTagSlug(posts, tag);
  const displayPosts = allPosts.filter(post => post.metadata.publishedAt);
  const tags = getAllTags(posts);
  const sortedTags = sortTagsByCount(tags);

  const itemsByYear = getItemsByYear(displayPosts);
  const years = Object.keys(itemsByYear).map(Number).sort(
    (a, b) => b - a,
  );

  return (
    <section>
      <PageHeader
        title={`Topic: ${title}`}
        description={`Posts on the topic of ${tag}`}
      />
        <div className="mb-8 flex flex-wrap gap-2">
          {sortedTags?.map((t, index) => (
            <Tag tag={t} key={index} count={tags[t]} current={nonAccentVietnamese(t) === tag} />
          ))}
        </div>
        {displayPosts?.length > 0 ? (
          <WritingList
            getItemsByYear={itemsByYear}
            years={years}
            url={"blog"}
          />
        ) : (
          <p>No posts available for the tag <strong>{title}</strong>.</p>
        )
      }
    </section>
  );
}

Folder structure:

...
  app
   |__(single-page)
          |__tags
               |__[tag]
                    |__page.tsx
       
  components
  ...

What I’ve tried:

Verified that all dependencies are compatible with Next.js 15.
Checked the Next.js 15 release notes for breaking changes.
Ran bun install to ensure all packages are correctly installed.

Despite this, the issue persists.

I would greatly appreciate any insights into what might be causing this issue and how to resolve it. If you need more information, let me know, and I’ll provide it.

Thank you!

Solution

Within some of the breaking changes for Next 15, it's worth noting that page params and searchParams are now asynchronous. So, for your example:

type TagPageProps = {
  params: Promise<{
    tag: string;
  }>
}

...

export async function generateMetadata({ params }: TagPageProps) {
  const { tag } = await params;
  ...
}

...

export default async function TagPage({ params }: TagPageProps) {
  const { tag } = await params;
  ...
}

Should do the trick.

This and other breaking changes can be found at https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams, as noted in the comment.