![](https://i0.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fspds6atgw0ms5tqz6nc2.jpg?w=1200&ssl=1)
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 thepages
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 thepages/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 thepublic
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.
Discover more from Coursity
Subscribe to get the latest posts sent to your email.