Create Static Routes for Blog List & Detail

Next.js

React

JavaScript

Technical Specification

Create a /blog page that lists posts and a dynamic [slug] route that shows blog details.

Input/Output Samples

Input:/blog/hello-next

Output:Shows 'hello-next' post

Optimal Logic Path

// app/blog/page.tsx
const posts = [{ slug: "hello-next", title: "Hello Next.js" }];

export default function BlogPage() {
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.slug}>{p.title}</li>
      ))}
    </ul>
  );
}

Architectural Deep-Dive

Static routes and dynamic segments let you create nested content like blogs easily.