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

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:

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

---

## Prerequisites

Before you start, ensure you have the following installed:

* **Node.js**: [Download Node.js](https://nodejs.org/) 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

1. **Create a New Next.js App**
    
    Next.js provides a quick setup tool called `create-next-app`. Run the following command in your terminal:
    
    ```bash
    npx create-next-app my-next-app
    ```
    
    During the setup, you’ll encounter the following prompts:
    
    ```plaintext
    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]
    ```
    
2. **Install Dependencies: (in case)**
    
    If you didn’t install dependencies during the setup, run:
    
    ```bash
    npm install
    ```
    
3. **Start the Development Server**
    
    Launch your app locally:
    
    ```bash
    npm run dev
    ```
    
    Open [http://localhost:3000](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:

```plaintext
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

1. **Add a New Page**
    
    Inside the `src/app/(home)/aboutus/` folder, create a file named `page.tsx`:
    
    ```typescript
    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](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 :

1. Create a new CSS file in the `src/app` folder, e.g., `src/app/globals.css`:
    
    ```css
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    
    h1 {
        color: #0070f3;
    }
    ```
    

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

```css
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

1. **Push Your Code to GitHub**
    
    Initialize a Git repository and push your code:
    
    ```css
    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](https://vercel.com/).
    
* 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!