How to Install and Set Up Next.js for Beginners

Next.js is a popular React framework that enables developers to build high-performance web applications with features like server-side rendering (SSR) and static site generation (SSG). In this step-by-step guide, we will cover everything you need to know to install and set up a Next.js project as a beginner.

Prerequisites

Before you begin, make sure your system meets the following requirements:

1. Node.js: Install the latest stable version from Node.js official website.
2. npm or yarn: These come bundled with Node.js. Alternatively, you can install yarn using:

npm install --global yarn

Check Your Setup

Run the following commands to verify your setup:

node -v  # Check Node.js version
npm -v   # Check npm version
yarn -v  # Check yarn version (optional)

If you see version numbers, you're ready to proceed.

Step 1: Create a New Next.js App

The easiest way to create a Next.js project is by using the create-next-app command.

Using npm:

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

Using yarn:

yarn create next-app my-nextjs-app

Using pnpm:

pnpm create next-app my-nextjs-app

Prompts During Setup

You'll be prompted to customize your project:

1. TypeScript: Choose yes if you want TypeScript support.
2. ESLint: Enable ESLint for consistent code quality.
3. Tailwind CSS: Select yes if you want to integrate Tailwind CSS.
4. src/ Directory: Decide whether to structure your app with a src/ folder.
5. Experimental App Router: Enable or disable experimental features.
6. Import Aliases: Configure aliases for better import paths.

The script will install all dependencies and generate the project structure.

Step 2: Navigate to Your Project Directory

Once the setup is complete, navigate into your project folder:

cd my-nextjs-app

Step 3: Start the Development Server

To start the development server, run:

Using npm:

npm run dev

Using yarn:

yarn dev

Using pnpm:

pnpm dev

Open your browser and visit http://localhost:3000 to view your app. You should see the Next.js default welcome page.

Step 4: Understand the Folder Structure

Here is the default folder structure of your Next.js app:

my-nextjs-app/
├── node_modules/         # Installed dependencies
├── pages/                # Application pages
│   ├── api/              # API routes
│   ├── _app.js           # Custom app layout
│   ├── index.js          # Home page
├── public/               # Static assets like images
├── styles/               # CSS files
├── .eslintrc.json        # ESLint configuration
├── package.json          # Project metadata
├── next.config.js        # Next.js configuration

Key folders and files:

• pages/: Contains all your app's routes.
• public/: For static assets like images or fonts.
• styles/: For global and modular CSS files.
• next.config.js: Customize your Next.js app settings.

Step 5: Create Your First Page

Next.js uses the pages/ directory to define routes. Let’s create a new page.

1. Create a file called about.js in the pages/ folder:

   touch pages/about.js
   

2. Add the following code to about.js:

   export default function About() {
       return (
           <div>
               <h1>About Page</h1>
               <p>Welcome to the about page of our Next.js app!</p>
           </div>
       );
   }
   

3. Open http://localhost:3000/about in your browser to see your new page.

Step 6: Add Global Styles

Next.js supports global CSS files for styling your application.

1. Open the styles/globals.css file.
2. Add the following styles:

   body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
       background-color: #f5f5f5;
   }
   
   h1 {
       color: #333;
   }
   

These changes will apply to your entire application.

Step 7: Use CSS Modules

For component-specific styles, use CSS Modules.

1. Create a file called Home.module.css in the styles/ directory:

   .title {
       color: blue;
       text-align: center;
   }
   

2. Modify pages/index.js to use this style:

   import styles from '../styles/Home.module.css';
   
   export default function Home() {
       return (
           <div>
               <h1 className={styles.title}>Welcome to Next.js!</h1>
           </div>
       );
   }
   

3. Refresh http://localhost:3000 to see the updated styles.

Step 8: Build for Production

When you're ready to deploy your app, create a production build using:

npm run build

This will optimize your app for production and output the build files in the .next/ directory.

To run the production build locally:

npm start

Step 9: Deploy Your App

You can deploy your app using services like Vercel, which is the official hosting provider for Next.js.

1. Install the Vercel CLI:

   npm install -g vercel
   

2. Deploy your app:

   vercel
   

Follow the prompts to complete the deployment. Your app will be live on a Vercel-provided URL.

Conclusion

Congratulations! You've successfully installed and set up a Next.js project. In this guide, we covered everything from creating a new app to deploying it for production. Explore features like API routes, static site generation (SSG), server-side rendering (SSR), and dynamic routing to take your Next.js skills to the next level.

For more details, check the official Next.js documentation.

Happy coding!