What is Next.js?

You've learned how to build interactive components with React. But what happens when you need to build a complete, multi-page application that is fast, optimized for search engines (SEO), and ready for production? That's where Next.js comes in.

Next.js is a React framework. It builds on top of React, providing a robust structure and a set of powerful features out-of-the-box that solve common challenges in web development, such as routing, data fetching, and rendering.

1. Setting Up a Next.js Project

Starting a Next.js project is incredibly simple thanks to its command-line tool.

Open your terminal and run the following command:

bash

npx create-next-app@latest my-nextjs-app

This command will prompt you with a few questions. For a beginner, the default answers are perfect. It will create a new directory called my-nextjs-app with a fully configured Next.js project.

To run your new app, navigate into the directory and start the development server:

bash

cd my-nextjs-app
npm run dev

Now, open your browser and go to http://localhost:3000. You'll see your new Next.js application!

2. File-Based Routing

One of the most powerful features of Next.js is its file-based routing system. You don't need to install a separate library for routing; you simply create files and folders inside the app directory.

app/page.tsx: This corresponds to the homepage (/).
app/about/page.tsx: This automatically creates a route at /about.
app/blog/[slug]/page.tsx: This is a dynamic route. The [slug] part is a placeholder that can match any value, like /blog/my-first-post.

Let's try it. Create a new folder named about inside the app directory. Inside about, create a new file named page.tsx with the following content:

tsx

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>This is the about page for our Next.js application.</p>
    </main>
  );
}

Now, save the file and navigate to http://localhost:3000/about in your browser. You'll see your new page! It's that simple.

3. Rendering Methods: SSG and SSR

Next.js gives you the power to choose how your pages are rendered, which has a huge impact on performance and SEO. The two main methods are:

Static Site Generation (SSG)

This is the default rendering method in Next.js. The HTML for the page is generated at build time (when you deploy your app). This makes the pages incredibly fast because they are served as static files from a CDN. SSG is perfect for pages where the content doesn't change often, like a blog post, a marketing page, or a documentation site.

Any React component you create in the app directory is a Server Component by default, which Next.js will prerender as static HTML.

Server-Side Rendering (SSR)

With SSR, the HTML for the page is generated on the server for every request. This is useful for pages that need to display fresh, user-specific data, like a user dashboard or a social media feed.

To opt into SSR for a specific page, you can access a dynamic function like headers or cookies from next/headers, or simply declare the page as dynamic:

tsx

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export const dynamic = 'force-dynamic'; // Opt into SSR

export default function DashboardPage() {
  const userCookie = cookies().get('user');

  return (
    <main>
      <h1>Welcome, {userCookie ? userCookie.value : 'Guest'}!</h1>
      <p>Your personalized dashboard content is here.</p>
    </main>
  );
}

4. Data Fetching

Next.js extends the native fetch API to allow you to configure caching and revalidation for your data requests on the server.

Let's fetch some data for a blog post page. In a Server Component, you can use async/await directly.

tsx

// app/blog/[slug]/page.tsx

async function getPost(slug) {
  // Fetch data from an external API
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  const post = await res.json();
  return post;
}

export default async function BlogPostPage({ params }) {
  const post = await getPost(params.slug);

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

By default, Next.js will automatically cache the result of this fetch request. This means the API is only called once at build time, and the result is reused for subsequent requests, making your application both fast and efficient.

Conclusion

You've now learned the core concepts that make Next.js so powerful. You understand its intuitive file-based routing, the difference between SSG and SSR, and how to fetch data within Server Components.

Next.js provides the structure and optimizations needed to turn your React skills into professional, production-grade web applications. The best way to learn is to build. Try creating a new page, fetching data from a public API, and deploying your application to a hosting provider like Vercel. Happy coding!

Azhagu-swe

Production-Ready React: An Introduction to Next.js