Unlocking Next.js: Supercharge Your React Apps with SSR and SSG

Introduction

Next.js has emerged as a game-changer for React developers, offering powerful features like server-side rendering (SSR), static site generation (SSG), and seamless API integration. In this guide, we’ll explore how Next.js simplifies building fast, SEO-friendly web applications while maintaining React’s flexibility.

Why Next.js?

Next.js extends React by solving common pain points:

• Automatic code splitting for faster page loads
• Built-in routing with a file-based system
• Hybrid rendering (SSR and SSG) out of the box

Core Features of Next.js

1. File-Based Routing

Create routes by simply adding files to the /pages directory:

// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

Visiting /about automatically renders this component!

2. Server-Side Rendering (SSR)

Use getServerSideProps to fetch data at request time:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.message}</div>;
}

3. Static Site Generation (SSG)

Pre-render pages at build time with getStaticProps:

export async function getStaticProps() {
  const posts = await fetch('https://api.example.com/posts');
  return { props: { posts } };
}

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

Building a Dynamic Blog with Next.js

Let’s create a blog with SSG and dynamic routes:

// pages/posts/[slug].js
export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts');
  const paths = posts.map(post => ({
    params: { slug: post.slug }
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`);
  return { props: { post } };
}

export default function PostPage({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

API Routes in Next.js

Create backend endpoints within your project using /pages/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Access it at /api/hello!

Conclusion

Next.js bridges the gap between React’s client-side capabilities and production-ready requirements like SEO and performance. By leveraging SSR, SSG, and intuitive routing, you can build blazing-fast applications that delight users and search engines alike. Ready to take your React apps to the next level? Dive into Next.js today!