No history yet

Introduction to Next.js

Why Use Next.js?

You already know React is a powerful library for building user interfaces. Next.js is a framework built on top of React that gives you extra superpowers, particularly for building full-fledged web applications.

Think of a standard React app like a flat-pack furniture kit. The browser receives the kit (your JavaScript code) and has to assemble the furniture (render the page) on the spot. This is called Client-Side Rendering (CSR). It works, but it can be slow for the user's first view, and search engines sometimes struggle to see the final, assembled product.

Next.js changes this by assembling the furniture before it gets to your house. It can pre-render pages on the server in two main ways:

  • Static Site Generation (SSG): The HTML for a page is generated at build time. This is incredibly fast and perfect for pages that don't change often, like a blog post or a marketing page.
  • Server-Side Rendering (SSR): The HTML for a page is generated on the server for each request. This is great for pages with dynamic content, like a user's profile page, because the content is always fresh.

This pre-rendering approach leads to better performance and significantly improved Search Engine Optimization (SEO), as search engines receive a fully-formed HTML page to crawl.

One of the core reasons developers choose Next.js for SEO optimization is its support for server-side rendering (SSR) and static site generation (SSG).

Creating Your First App

Getting a Next.js project running is straightforward. First, make sure you have Node.js version 18.17 or later installed on your system. You can check this by running node -v in your terminal.

With Node.js ready, you can create a new Next.js application using a single command. Open your terminal, navigate to where you want your project to live, and run the following:

npx create-next-app@latest

This command will prompt you with a few questions to configure your project. For now, you can accept the defaults by pressing Enter for each one. It will ask for your project name and if you'd like to use features like TypeScript, ESLint, and Tailwind CSS.

The Project Structure

Once the installation is complete, navigate into your new project directory. You'll see several files and folders, but the most important one to start with is the app directory. This is the heart of the latest version of Next.js.

Next.js uses a file-system based router. This means the folder structure inside the app directory directly maps to the URL routes of your application.

Inside the app directory, you'll find a page.tsx (or page.jsx) file. This file corresponds to the root of your website, or the / route. Any folder you create inside app becomes a new route segment. For example, creating an app/about/page.tsx file would automatically create an /about page on your site.

Let's look at the default app/page.tsx file. It's simply a React component.

export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
    </main>
  );
}

You can edit this file just like any other React component. To see your application in action, run the development server from your project's root directory:

npm run dev

Now, open your web browser and navigate to http://localhost:3000. You should see the welcome page rendered by your page.tsx component. Try making a change to the text in that file, save it, and watch the page update in your browser automatically. This is called Fast Refresh, another feature that makes developing with Next.js a great experience.

Quiz Questions 1/5

What is a primary advantage of Next.js's pre-rendering approach compared to a standard Client-Side Rendered (CSR) React application?

Quiz Questions 2/5

You are building a user's personal dashboard page, where the content must be fresh and unique for every request. Which Next.js rendering strategy is most suitable?

You've just scratched the surface of what Next.js can do. By handling the complex parts of building a modern web application, it lets you focus on what matters: creating a great user experience with React.