Beginner's Guide to Next.js

Next.js has emerged as one of the most popular frameworks for building modern web applications. Its features like server-side rendering, static site generation, and built-in API routes make it a go-to choice for developers. Whether you’re new to web development or transitioning from another framework, this guide will help you set up your first Next.js project and understand its fundamentals.

Why Choose Next.js?

Next.js provides several advantages that make it stand out:

File-Based Routing: Create routes simply by adding files to your project structure.
SEO Optimization: Built-in support for server-side rendering and metadata handling.
API Routes: Easily create backend logic within your app.
Performance: Automatic code splitting and image optimization.
Flexibility: Supports both static and server-rendered content.

Prerequisites

Before you start, ensure you have the following installed:

Node.js: Download Node.js if you don’t already have it.
npm or yarn: Comes with Node.js (choose one for managing packages).
Basic Knowledge of React: Helpful but not mandatory.

Step 1: Setting Up Your Next.js Project

Create a New Next.js App

Next.js provides a quick setup tool called create-next-app. Run the following command in your terminal:

 npx create-next-app my-next-app

During the setup, you’ll encounter the following prompts:

 Would you like to use TypeScript? No / Yes [Yes]
 Would you like to use ESLint? No / Yes    [Yes]
 Would you like to use Tailwind CSS? No / Yes [Yes]
 Would you like your code inside a `src/` directory? No / Yes [Yes]
 Would you like to use App Router? (recommended) No / Yes  [Yes]
 Would you like to use Turbopack for `next dev`?  No / Yes [Yes]
 Would you like to customize the import alias (`@/*` by default)? No / Yes [No]

Install Dependencies: (in case)

If you didn’t install dependencies during the setup, run:
```
 npm install
```
Start the Development Server

Launch your app locally:
```
 npm run dev
```
Open http://localhost:3000 in your browser to view the default Next.js welcome page.

Step 2: Understanding the Folder Structure

When you open your Next.js project, you’ll see the following structure if you choose to use the src directory and App Router:

my-next-app/
  ├── src/
  │   ├── app/
  │   │   ├── (home)/
  │   │   │   ├── aboutus/
  │   │   │   │   └── page.tsx
  │   │   │   ├── products/
  │   │   │   │   └── page.tsx
  │   │   │   ├── page.tsx         // common page for home
  │   │   │   └── layout.tsx       // common layout for home
  │   │   ├── (auth)/
  │   │   │   ├── signup/
  │   │   │   │   └── page.tsx
  │   │   │   ├── signin/
  │   │   │   │   └── page.tsx
  |   |   ├── api/
  │   │   │   └── accounts.tsx
  │   │   │   └── products.tsx
  |   |   ├── layout.tsx         // common layout for app
  ├── public/                    // Static assets
  ├── package.json

Key Folders:

app: Contains the App Router with structured routing using folders like aboutus and products.
api: Backend logic and APIs.
auth : Authentication logic
public: Store static assets like images and fonts.

Step 3: Creating Your First Route

Add a New Page

Inside the src/app/(home)/aboutus/ folder, create a file named page.tsx:

 export default function AboutUs() {
     return (
         <div>
             <h1>About Us</h1>
             <p>This is the About Us page.</p>
         </div>
     );
 }

Visit the Route

Navigate to http://localhost:3000/aboutus. You’ll see your new page in action!

You can style your pages using CSS files or CSS-in-JS libraries. Let’s add some basic styling:

Tailwind CSS (Recommended)

If not using Tailwind CSS , then :

Create a new CSS file in the src/app folder, e.g., src/app/globals.css:

 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
 }

 h1 {
     color: #0070f3;
 }

Import the CSS file in src/app/layout.tsx:

import "../globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
}

Step 5: Deploying Your Next.js App

Push Your Code to GitHub

Initialize a Git repository and push your code:

 git init
 git add .
 git commit -m "Initial commit"
 git branch -M main
 git remote add origin <your-repository-url>
 git push -u origin main

Deploy on Vercel

Next.js is developed by Vercel, and deploying there is seamless:

Sign up at Vercel.
Import your GitHub repository.
Follow the deployment instructions.

Your app will be live with a custom URL!

Next Steps

Now that you’ve set up your first Next.js app, here are some areas to explore:

Dynamic Routes: Create routes with URL parameters.
API Routes: Build a full-stack app with backend logic.
Image Optimization: Use the next/image component.
Server-Side Rendering (SSR): Fetch data on the server for SEO benefits.

Conclusion

Next.js simplifies the process of building modern web applications with its powerful features and intuitive setup. By following this guide, you’ve taken the first step toward mastering Next.js. Keep experimenting, building, and exploring its capabilities—you’ll be amazed at what you can create!

Happy coding!

Getting Started with Next.js: A Beginner's Guide

Table of contents