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'

 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.