The Ultimate Next.js Cheat Sheet for Developers
Tags: cheatsheet, nextjs, webdev, javascript
Published: 2024-04-26 10:26:33

## 🚀 Check Out My YouTube Channel! 🚀
Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak). I post practical full-stack development videos that complement my blog posts. Your support means a lot!

Next.js has rapidly become one of the go-to frameworks for building performant and scalable web applications. Its seamless integration with React, automatic code splitting, and server-side rendering capabilities make it a powerful choice for developers. This cheat sheet is designed to provide you with a quick reference to the most essential Next.js commands, functionalities, and best practices.

### Setting Up and Basic Commands

**Installing Next.js**:
Create a new Next.js app using the create-next-app command. This sets up everything automatically for you.
```bash
npx create-next-app my-next-app
cd my-next-app
npm run dev
```

**Development Server**:
Start the development server on http://localhost:3000.
```bash
npm run dev
```

**Building for Production**:
Build your application for production usage.
```bash
npm run build
npm start
```

**Exporting a Static Website**:
Generate a static website from your Next.js application.
```bash
npm run build
npm run export
```

### Key Concepts in Next.js

#### Pages & Routing

- **Pages**:
  In Next.js, a page is a React Component exported from a file in the `pages` directory. The pathname matches the file name, e.g., `pages/about.js` responds to `/about`.

- **Dynamic Routes**:
  Create dynamic routes by adding square brackets to a page name, e.g., `pages/posts/[id].js`.

#### API Routes

- **Creating API Routes**:
  Define API routes by creating files within the `pages/api` directory. Each JavaScript file becomes an API route that handles requests independently.
  
  ```javascript
  // pages/api/hello.js
  export default function handler(req, res) {
    res.status(200).json({ name: 'John Doe' })
  }
  ```

#### CSS & Styling

- **Built-in CSS Support**:
  Import CSS files in components using standard CSS imports.
  
  ```javascript
  import '../styles/globals.css'
  ```

- **CSS Modules**:
  Use CSS Modules for component-level styles by naming files `[name].module.css`.

- **Styled JSX**:
  Write scoped CSS directly in your JavaScript files using styled JSX.

  ```javascript
  export default function Home() {
    return (
      <div>
        <p className="description">Welcome to Next.js!</p>
        <style jsx>{`
          .description {
            font-size: 20px;
            color: blue;
          }
        `}</style>
      </div>
    )
  }
  ```

#### Static Files

- **Serving Static Files**:
  Place static files such as images in the `public` directory where they can be referenced by your application.

### Advanced Features

#### Server-Side Rendering (SSR)

- **getServerSideProps**:
  Fetch data on each request and pass this data as props to your page.

  ```javascript
  export async function getServerSideProps(context) {
    const res = await fetch(`https://.../data`)
    const data = await res.json()
  
    return { props: { data } }
  }
  ```

#### Static Site Generation (SSG)

- **getStaticProps**:
  Fetch data at build time and pre-render the page to static HTML.

  ```javascript
  export async function getStaticProps() {
    const res = await fetch('https://.../data')
    const data = await res.json()
  
    return {
      props: {
        data,
      },
    }
  }
  ```

- **getStaticPaths**:
  Specify dynamic routes to pre-render pages based on data.

  ```javascript
  export async function getStaticPaths() {
    const paths = [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ]
  
    return { paths, fallback: false }
  }
  ```

### Conclusion

This Next.js cheat sheet should serve as a helpful guide to kickstart your projects or refine your workflow in Next.js development. Whether you're building a small personal project or a large-scale production application, Next.js offers the tools and flexibility you need to succeed.