2 Jan 2025

Next.js 14 Basics: Beginner’s Guide with Practical Examples (2025)

Next.js 14 just dropped - and it’s faster, simpler, and more powerful than ever. Here’s how to get started and build modern web apps like a pro

- What’s New in Next.js 14?

Stable App Router: Production-ready routing with React Server Components
Turbopack (Beta): 700ms faster dev server than Webpack
Server Actions (Stable): Write backend logic directly in components
Enhanced TypeScript: Auto-configuration and stricter defaults

Getting Started

1 - Create a Project

npx create-next-app@latest

2 - Folder Structure

app/  
  layout.tsx    # Root layout  
  page.tsx      # Home page  
public/         # Static assets

Core Concepts

1 - App Router (app/ directory)

Example 1: Basic Page Routing

Create app/about/page.tsx. Visiting /about automatically renders this page.

export default function About() {  
  return (  
    <div>  
      <h1>About Us</h1>  
      <p>Welcome to our Next.js 14 tutorial!</p>  
    </div>  
  );  
}

2 - React Server Components

Example 2: Server-Side Data Fetching

No client-side JavaScript needed - data fetches on the server!

// app/blog/page.tsx  
async function getPosts() {  
  const res = await fetch('https://api.example.com/posts');  
  return res.json();  
}  

export default async function BlogPage() {  
  const posts = await getPosts();  

  return (  
    <div>  
      <h1>Blog Posts</h1>  
      <ul>  
        {posts.map((post) => (  
          <li key={post.id}>{post.title}</li>  
        ))}  
      </ul>  
    </div>  
  );  
}

3 - Server Actions

Example 3: Form Submission

No API routes needed – server logic colocated with UI!

// app/contact/page.tsx  
'use server';  

export async function submitForm(formData: FormData) {  
  const name = formData.get('name');  
  // Save to database or send email  
  console.log("Received message from 'name'");  
}  

// Client Component  
export default function ContactPage() {  
  return (  
    <form action={submitForm}>  
      <input type="text" name="name" required />  
      <button type="submit">Send</button>  
    </form>  
  );  
}

Key Features Explained

1 - Layout System

// app/layout.tsx  
export default function RootLayout({  
  children,  
}: {  
  children: React.ReactNode  
}) {  
  return (  
    <html lang="en">  
      <body className={inter.className}>  
        <nav>Main Navigation</nav>  
        <main>{children}</main>  
      </body>  
    </html>  
  );  
}

2 - Client Components

Example 2: Server-Side Data Fetching

No client-side JavaScript needed - data fetches on the server!

// app/blog/page.tsx  
async function getPosts() {  
  const res = await fetch('https://api.example.com/posts');  
  return res.json();  
}  

export default async function BlogPage() {  
  const posts = await getPosts();  

  return (  
    <div>  
      <h1>Blog Posts</h1>  
      <ul>  
        {posts.map((post) => (  
          <li key={post.id}>{post.title}</li>  
        ))}  
      </ul>  
    </div>  
  );  
}

Optimization Tips

Static Site Generation (SSG)

export async function generateStaticParams() {  
  return [{ id: '1' }, { id: '2' }];  
}

Incremental Static Regeneration (ISR)

fetch('https://api.example.com/data', {  
  next: { revalidate: 3600 } // Refresh every hour  
});

Why Next.js 14?

40% Faster Local Development with Turbopack (vs Next.js 13)
70% Less Client-Side JavaScript with Server Components
Full-Stack Capabilities in a Single Framework