Getting Started with Next.js

Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

Why Next.js?

Next.js simplifies the process of building a React application in several ways:

• Server-side rendering: Next.js generates HTML on each request, making your site more SEO-friendly.
• Static site generation: Pre-render pages at build time for better performance.
• API routes: Create API endpoints easily within your Next.js app.
• Built-in CSS and Sass support: Includes support for CSS Modules, styled-jsx, and other styling solutions.
• Fast refresh: Instantly view changes without losing component state.

Setting Up Your First Next.js Project

Getting started with Next.js is straightforward. Here's how to create your first project:

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

This will create a new Next.js project with a default template and start the development server. You can now visit http://localhost:3000 to see your application.

Pages in Next.js

In Next.js, a page is a React Component exported from a file in the pages directory. Each page is associated with a route based on its file name.

For example, if you create a file at pages/about.js that exports a React component like this:

export default function About() {
  return <div>About Page</div>
}

Then it will be accessible at /about.

Dynamic Routes

Next.js supports dynamic routes. If you create a file called pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

Data Fetching

Next.js has three functions for data fetching:

1. getStaticProps: Fetch data at build time.
2. getStaticPaths: Specify dynamic routes to pre-render based on data.
3. getServerSideProps: Fetch data on each request.

Here's an example of using getStaticProps:

export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

API Routes

Next.js has support for API Routes, which allow you to build your API directly in your Next.js app. Here's an example:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

This creates an API endpoint at /api/hello that returns a JSON response.

Conclusion

Next.js is a powerful framework that makes building React applications easier and more efficient. It provides a great developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Whether you're building a blog, an e-commerce site, or a complex web application, Next.js provides the tools and structure you need to succeed.