How to Set Up a New Next.js Application

Next.js is a powerful framework for building server-side rendered React applications with ease. It comes with great developer experience and built-in features like static site generation, server-side rendering, and easy API integration. If you're new to Next.js or want a quick refresher on setting up a Next.js application from scratch, this guide will walk you through all the necessary steps.

Prerequisites

Before you start, make sure you have the following installed on your computer:

  • Node.js (version 14 or later recommended): You can download it from Node.js official website.
  • npm (Node Package Manager) or yarn: These are package managers used for installing dependencies.

To verify if Node.js and npm are installed, run the following commands:

node -v
npm -v

If they are installed correctly, you should see the versions printed in the terminal.

Step 1: Create a New Next.js Application

The easiest way to set up a new Next.js application is by using the Create Next App command, which comes with everything pre-configured.

Run the following command in your terminal to create a new Next.js application:

npx create-next-app@latest my-next-app
  • npx: This is a package runner tool that comes with npm. It allows you to run commands from the npm registry.
  • create-next-app: This is the package that sets up a new Next.js project.
  • my-next-app: Replace my-next-app with the name of your project.

Alternatively, you can use yarn:

yarn create next-app my-next-app

Once the command runs, you'll be prompted with a few questions, like choosing TypeScript, adding ESLint, or using a custom template. Feel free to choose according to your project's requirements.

Step 2: Navigate into Your Project Directory

After the setup is complete, navigate into your new project directory:

cd my-next-app

Step 3: Run the Development Server

To start your Next.js development server, run the following command:

npm run dev

or, if you're using yarn:

yarn dev

By default, the development server will run on http://localhost:3000. You can open this URL in your browser to see your new Next.js application running.

Step 4: Understanding the Project Structure

When you open your Next.js project folder, you'll see several files and directories. Here's a quick overview:

  • pages/: This directory contains all your pages. Each file in pages/ automatically becomes a route in your application.
  • app/: The app directory is a new addition for setting up the App Router, which provides a modern way of defining layouts and routes in Next.js.
  • public/: Static files like images and fonts go here.
  • styles/: This folder contains CSS files. By default, Next.js comes with globals.css for global styles.
  • next.config.js: Configuration for your Next.js application.

Step 5: Setting Up the App Router

Next.js now includes an App Router feature that makes routing and layouts more flexible and efficient. To use the App Router, create a new directory called app/ at the root of your project.

In the app/ directory, you can create different folders representing routes, with each folder containing its own page.js file. For example:

  1. Create a new directory called app/about/.
  2. Inside app/about/, create a new file called page.js with the following content:
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page using the App Router in Next.js.</p>
    </div>
  );
}

Now, when you navigate to http://localhost:3000/about, you will see the About page rendered using the new App Router structure.

The App Router also allows you to define layouts easily. You can add a layout.js file inside any route folder to define a consistent layout for that route. For instance, create a layout.js file inside the app/ directory:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
          </nav>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

This layout will wrap all pages within the app/ directory, providing a consistent structure throughout your application.

Step 6: Modify the Home Page

Next.js comes with a default home page (pages/index.js). To modify this page, open pages/index.js in your favorite code editor and change the content to something like this:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>My First Next.js App</title>
        <meta name="description" content="This is my first Next.js application" />
      </Head>

      <main className={styles.main}>
        <h1>Welcome to My Next.js App!</h1>
        <p>Let's build something amazing.</p>
      </main>
    </div>
  );
}

Save the file, and you should see the updated content when you refresh your browser.

Step 7: Adding a New Page

To add a new page, simply create a new file in the pages/ directory or in the app/ directory if you are using the App Router.

For example, to add an About page using the App Router:

  1. Create a new folder called app/about/.
  2. Inside app/about/, create a new file called page.js with the following content:
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page of our Next.js application.</p>
    </div>
  );
}

Now, when you visit http://localhost:3000/about, you will see your new About page.

Step 8: Setting Up Styles

Next.js supports both CSS modules and global CSS. To add styles to your project, you can either edit existing CSS files in the styles/ directory or create new ones.

For example, you can add a new CSS file called about.module.css in the styles/ directory and import it into the about.js page:

import styles from '../styles/about.module.css';

export default function About() {
  return (
    <div className={styles.container}>
      <h1>About Us</h1>
      <p>This is the about page of our Next.js application.</p>
    </div>
  );
}

The file about.module.css might look like this:

.container {
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
}

Step 9: Build for Production

Once you're ready to deploy your Next.js application, run the following command to build your app for production:

npm run build

or, using yarn:

yarn build

This will create an optimized production build in the .next folder.

Step 10: Start the Production Server

After building your application, you can start the production server with:

npm start

or

yarn start

Your application will now run in production mode.

Conclusion

Setting up a new Next.js application is quick and straightforward, thanks to its robust tools and pre-built configurations. With features like server-side rendering, static site generation, API routes, and the new App Router, you have all the power you need to create amazing web applications. Now that you have your Next.js application up and running, you can start building, adding new pages, components, and exploring the many features Next.js has to offer.

Happy coding!