Next.js 15 App Router: What I Learned Building My Portfolio

Here's everything worth knowing if you want to write a strong, well-structured blog post on this topic — both the content angle and the writing structure.

Why this topic performs well

Next.js 15 app router is one of the most searched topics in the React/Next.js ecosystem right now. Developers are actively migrating from the pages router and looking for real-world experience, not just docs rewrites. A personal portfolio post has a natural edge here — you can say "here's what actually happened when I built this" which documentation never can.

Suggested post structure

1. Hook (intro paragraph) Start with a specific pain point or surprise moment. Something like:

"I assumed the app router was just a file-system routing upgrade. Three weeks in, I realized it was a completely different mental model."

2. What changed in Next.js 15 specifically Cover the things worth highlighting:

• Async params and searchParams — now Promises, requires await

• fetch caching is opt-in by default (breaking change from v14)

• Partial Prerendering (PPR) experimental support

• Turbopack stable for next dev

• React 19 support

3. Patterns you actually used This is the meat. Share code snippets from your real portfolio. For example your generateMetadata with async params — that's already in your codebase and is a perfect teaching moment since many developers get caught by the Promise-based params change.

4. Mistakes you made This is what makes a post memorable and shareable. Examples:

• Forgetting await on params and getting a confusing error

• Accidentally making a server component interactive without "use client"

• Over-fetching because you didn't colocate data fetching close to where it's used

5. What you'd do differently A short retrospective section. Readers love this — it shows honesty and saves them from making the same mistakes.

6. Conclusion + what's next End with one sentence takeaway and a tease of related content (links to your other posts).

Code snippets to include

These are from your own codebase — use them directly:

// The new async params pattern in Next.js 15
export default async function BlogDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params; // ← must await this now
  ...
}

// generateMetadata also needs the await
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  ...
}