How to Seamlessly Merge Vercel's Blog Starter into a Next.js App

When building a modern web application, you often want a custom, interactive primary site alongside a content-rich, static markdown blog. Vercel provides excellent templates for both: the standard create-next-app and the blog-starter.

Instead of dealing with complex Multi-Zone configurations or reverse proxies, the cleanest approach is to merge the blog directly into your main app under a /blog route. Here is exactly how to do it, including how to navigate the transition to Tailwind CSS v4.

Phase 1: Migration and Routing

The goal is to keep your main site at the root (/) while serving your markdown posts dynamically from /blog and /blog/[slug].

1. Extract the Blog Logic

Instead of merging blindly, initialize the blog starter in a temporary folder: npx create-next-app --example blog-starter temp-blog

Next, move the core blog assets into your main Next.js project:

• Move the _posts/ directory to your project root.
• Copy public/assets/blog/ to your public/assets/ directory.
• Move the lib/ and interfaces/ folders into your root (or src/ directory).
• Copy the blog-specific React components into your components/ folder.

2. Configure the App Router

In your main project, set up the new routing structure using the Next.js App Router:

• The Blog Index: Create app/blog/page.tsx and paste the contents of the blog starter's root page.tsx.
• The Dynamic Posts: Create app/blog/[slug]/page.tsx and paste the contents of the blog starter's posts/[slug]/page.tsx.

Note: You will need to update the relative import paths in these files to point to your new components and lib directories.

3. Update Internal Links

Because the blog is now nested under /blog, you must update the Next.js <Link> components in the blog starter files (specifically post-preview.tsx and hero-post.tsx).

Change the href attributes from /posts/${slug} to /blog/${slug}.

Phase 2: Resolving Missing Dependencies

A fresh create-next-app does not include the third-party packages that the blog-starter relies on to parse markdown and format strings. If you run your dev server at this stage, you will likely see a Module not found: Can't resolve 'classnames' error.

To fix this and proactively prevent the next few errors, install the required packages:

npm install classnames date-fns remark remark-html