The Ultimate Next.js Cheat Sheet for Developers

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.

npx create-next-app my-next-app
cd my-next-app
npm run dev

Development Server:
Start the development server on http://localhost:3000.

npm run dev

Building for Production:
Build your application for production usage.

npm run build
npm start

Exporting a Static Website:
Generate a static website from your Next.js application.

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.

  // 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.

  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.
  

  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.

  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.

  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.

  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.

Comments

[Omojola Tomiloba David]

This is based on the pages router
What about the relatively new app router