NN

Loading Portfolio

Back to Articles
Next.js
8 min read

Building Modern Web Apps with Next.js 13

How to leverage the new features of Next.js 13 in your projects. Explore app directory, server components, and improved routing.

Building Modern Web Apps with Next.js 13

Next.js 13 represents a significant leap forward in React framework development, introducing groundbreaking features that reshape how we build web applications. In this guide, we'll explore the key innovations and how to implement them in your projects.

The New App Directory

Next.js 13 introduces a revolutionary app directory structure that coexists with the traditional pages directory. This new approach provides enhanced flexibility and improved organization for your application.

unknown
app / layout.js;
page.js;
about / page.js;
blog / [slug] / page.js;
page.js;

The app directory uses React Server Components by default, offering several advantages:

  • Reduced client-side JavaScript
  • Improved initial page load
  • Better search engine optimization
  • Enhanced streaming capabilities

Creating Your First Layout

Layouts in the app directory allow you to share UI between multiple pages. Here's how to create a basic layout:

unknown
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>{/* Your navigation components */}</nav>
        </header>
        <main>{children}</main>
        <footer>{/* Your footer components */}</footer>
      </body>
    </html>
  );
}

Server Components: A New Paradigm

Server Components represent a fundamental shift in how we build React applications. They execute on the server, reducing the JavaScript bundle sent to the client.

When to Use Server Components

Server Components are ideal for:

  • Data fetching directly from your database
  • Accessing backend resources securely
  • Keeping sensitive information server-side
  • Reducing client-side JavaScript

Here's an example of a Server Component fetching data:

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

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

  return (
    <div>
      <h1>Blog Posts</h1>
      <div className="grid">
        {posts.map((post) => (
          <article key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </article>
        ))}
      </div>
    </div>
  );
}

Improved Routing and Loading States

Next.js 13 introduces a more intuitive routing system with built-in loading and error states.

Loading States

Create loading UI that shows while content loads:

unknown
// app/posts/loading.js
export default function Loading() {
  return (
    <div className="loading-spinner">
      <div className="spinner"></div>
      <p>Loading posts...</p>
    </div>
  );
}

Error Handling

Implement error boundaries at the page level:

unknown
// app/posts/error.js
"use client";

export default function Error({ error, reset }) {
  return (
    <div className="error-container">
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

Data Fetching and Caching

Next.js 13 provides powerful data fetching capabilities with built-in caching:

unknown
async function getData() {
  const res = await fetch("https://api.example.com/data", {
    next: {
      revalidate: 3600, // Revalidate every hour
    },
  });

  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

Client Components When Needed

While Server Components are the default, you can still use Client Components when necessary:

unknown
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Best Practices for Next.js 13

  1. Embrace Server Components Use Server Components by default and only switch to Client Components when necessary (for interactivity or browser APIs).

  2. Optimize Images Use the built-in Next.js Image component for automatic optimization:

unknown
import Image from "next/image";

export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile picture"
      width={300}
      height={300}
      priority
    />
  );
}

  1. Implement Progressive Enhancement Build your application to work without JavaScript first, then enhance with client-side features.

  2. Use Metadata API Implement dynamic metadata for better SEO:

unknown
export async function generateMetadata({ params }) {
  return {
    title: "Your Dynamic Title",
    description: "Your Dynamic Description",
    openGraph: {
      images: ["/some-image.jpg"],
    },
  };
}

Conclusion

Next.js 13 brings significant improvements to the React ecosystem, making it easier to build performant, scalable web applications. By leveraging Server Components, the new app directory, and improved routing features, you can create better user experiences while maintaining developer productivity.

Remember to:

  • Start with Server Components
  • Use the app directory for new projects
  • Implement proper loading and error states
  • Optimize images and metadata
  • Add client-side interactivity only where needed

These practices will help you build modern, efficient web applications that perform well and provide excellent user experiences.

Happy coding! 🚀