Getting Started with Next.js

Next.js has become my go-to framework for building React applications. Here's a quick guide to getting started with the App Router.

Creating a New Project#

npx create-next-app@latest my-app
cd my-app
npm run dev

Project Structure#

The App Router uses a file-system based routing approach:

Server Components#

By default, all components in the App Router are Server Components. This means they render on the server and send HTML to the client — no JavaScript bundle needed.

// This runs on the server — no "use client" needed
export default async function BlogPage() {
  const posts = await getPosts();
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

When to Use Client Components#

Add "use client" only when you need:

1. Event handlers (onClick, onChange)
2. State (useState, useReducer)
3. Effects (useEffect)
4. Browser APIs (window, localStorage)

Key Takeaways#

• Start with Server Components by default
• Use "use client" only when needed
• Leverage the file-system router for clean URL structures
• Take advantage of static generation for performance

Next.js makes it easy to build fast, SEO-friendly applications without sacrificing developer experience.

Happy building!