Getting Started with Next.js

Next.js is a React framework that enables functionality such as server-side rendering and static site generation. It's designed to make building React applications easier and more efficient.

Why Choose Next.js?

There are several reasons why Next.js has become a popular choice for React developers:

Server-Side Rendering (SSR): Next.js can render your pages on the server, which improves performance and SEO.
Static Site Generation (SSG): You can pre-render pages at build time, resulting in fast page loads.
API Routes: Next.js allows you to create API endpoints as part of your application.
File-based Routing: The framework uses a file-based routing system that's intuitive and easy to use.
Built-in CSS Support: Next.js has built-in support for CSS modules, Sass, and other styling options.

Setting Up Your First Next.js Project

Getting started with Next.js is straightforward. Here's how you can create your first project:

0. Prerequistes

Before starting with Next.js, make sure you have the following prerequisites in place:

Node.js: Next.js requires Node.js to run. You can download and install it from the official Node.js website. Make sure you're using the latest LTS version of Node.js.
npm: Next.js uses npm (Node Package Manager) to manage dependencies. npm is installed automatically with Node.js.
Basic Understanding of JavaScript and React: Next.js is built on top of React, so it’s essential to have a basic understanding of React, including components, JSX, and hooks. If you’re new to React, consider going through React's official documentation.
Text Editor: A good text editor or IDE will make writing code much easier. Visual Studio Code is a great choice for web development and has excellent support for JavaScript and React. You can download it here.

Once you've set up these prerequisites, you're ready to start building your Next.js application!

1. Create a New Project

Use the following command to create a new Next.js project:

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

You can change my-next-app into any other name you wish. But for the sake of consistency, we will be using my-next-app throught the post.

2. Navigate to Your Project Directory

After creating your Next.js app, navigate to your project folder:

cd my-next-app

3. Start the Development Server

Once you're inside your project directory, you can start the development server by running:

npm run dev

This will start the Next.js application and you can view it by going to http://localhost:3000 in your browser. You'll see the default Next.js welcome page.

Understanding the File Structure

The file structure of a Next.js project is simple and intuitive. Here's a breakdown of the key folders and files:

pages/: This is where your React components go. Each file in this directory automatically becomes a route in your app. For example, pages/index.js will be accessible at /, and pages/about.js will be accessible at /about.
public/: This directory is where you can place static assets like images, fonts, and other files that don't require processing.
styles/: This folder contains the CSS files for your project, and you can add global styles here or use CSS modules for specific components.

Creating Pages in Next.js

One of the simplest features of Next.js is its file-based routing. To create new pages, you just need to add new files to the pages folder.

Example: Creating an About Page

Create a new file in the pages folder named about.js:

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to the about page of our website!</p>
    </div>
  );
}

Now, if you navigate to http://localhost:3000/about in your browser, you'll see your new About page.

Working with Components

You can structure your app using reusable components. Next.js works seamlessly with React components, so you can break down your UI into smaller, maintainable parts.

Example: Creating a Header Component

First, create a new components folder in the root of your project. Then, add a file named Header.js inside the components folder:

export default function Header() {
  return (
    <header>
      <h1>Welcome to My Next.js App</h1>
    </header>
  );
}

Now, you can import and use this component in any page. For example, you can add it to the pages/index.js file like this:

import Header from '../components/Header';

export default function Home() {
  return (
    <div>
      <Header />
      <h2>Hello, World!</h2>
    </div>
  );
}

Static Site Generation (SSG)

Next.js makes it easy to pre-render your pages at build time using Static Site Generation (SSG). This means that when you deploy your site, the HTML for each page is generated ahead of time, making your pages load faster.

To implement SSG, you can use the getStaticProps function inside your page component. Here's an example:

export async function getStaticProps() {
  // Fetch your data (e.g., from an API or database)
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());

  return {
    props: {
      posts,
    },
  };
}

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

In the example above, the getStaticProps function fetches data before the page is rendered, and the fetched data is passed as props to the Posts component. This allows you to generate static pages with dynamic content.

Server-Side Rendering (SSR)

While SSG is great for static content, sometimes you need to fetch data on each request, especially if it's frequently changing. In this case, you can use Server-Side Rendering (SSR) by using the getServerSideProps function.

Here’s an example of SSR in Next.js:

export async function getServerSideProps() {
  // Fetch data on each request
  const products = await fetch('https://api.example.com/products').then(res => res.json());

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

With SSR, the getServerSideProps function runs on every request, allowing you to fetch up-to-date data each time the page is loaded.

Conclusion

Next.js provides a great way to build React applications with additional features like server-side rendering, static site generation, and a simple file-based routing system. By using the examples in this guide, you should be able to create your first Next.js project and start building web applications with ease.

To continue exploring Next.js, check out the official Next.js documentation for more advanced topics and use cases. Happy coding!