NextJS Examples | Starter

NextJS Examples | Starter

NextJS Examples | Layout

NextJS Examples | Express

NextJS Examples | MongoDB

Next.js has solidified its place as a leading React framework for server-side rendering (SSR) and static site generation (SSG). For a deeper dive into the benefits of these rendering modes, see client-side vs server-side rendering.

---

With Next.js, you skip over many intricate configurations typical in React applications. There's no need to tinker with installation or setup for Babel, Webpack, react, or react-dom. Servers, such as those built using Express, come preconfigured.

To start, simply use:

npx create-next-app@latest your-app

This command sets up a full Next.js application with all necessary dependencies.

Key Takeaways

• Next.js simplifies server-side rendering and static site generation with minimal configuration requirements.
• Projects initiated with Next.js come with preconfigured Babel, Webpack, and server solutions.
• The folder structure dictates routing and API endpoint creation in a straightforward manner.
• Next.js optimizes performance with automatic code splitting and SSR capabilities.

How Next.js Works

Creating a Next.js app with the CLI produces this folder structure:

├── components
   └── nav.js
├── pages
    └── index.js
├── public
├── next.config.js
├── node_modules
├── package.json

Reusable components belong in the components folder, while the pages directory houses your different app pages.

Static files are situated in the public folder, and you can customize Webpack and other settings in next.config.js.

The package.json file looks like this:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }

Running:

npm run dev

launches your app in development mode.

And running:

npm run build

bundles your application for production, which you can then deploy using:

npm run start

Creating Pages with Next.js

Next.js uses a filesystem-based router. Any file in the pages folder corresponds to a route. Example:

const About = () => (
  <div><h1>About us</h1></div>
)
export default About

Place about.js under pages:

├── pages
│   └── index.js
│   └── about.js

Access it at http://localhost:3000/about.

Creating API Endpoints with Next.js

Next.js also has a straightforward way to set up API routes:

export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.statusCode = 200
  res.end(JSON.stringify({ title: 'The Hobbit', author: 'Tolkien' }))
}

Save this as books.js in the pages/api/ directory:

├── pages
│   └── api/
│       └── books.js

The endpoint http://localhost:3000/api/books will return JSON data.

Serving Static Files

Just put static assets like images in the public folder. For instance:

├── public
       └── some-image.png

Reference it using:

<img src="/some-image.png" alt="some image" />

Customizing and Extending Next.js

Next.js provides configuration options for customizing the build process. The next.config.js file allows for modifications:

// next.config.js
module.exports = {
  useFileSystemPublicRoutes: false,
}

This would disable the default filesystem-based routing.

The Benefits of Using Next.js

Without Next.js, you'd face extensive manual setup, like configuring servers to serve pages and static files. Next.js automates SSR and code splitting, greatly enhancing performance and reducing initial load times. Its built-in CSS support streamlines styling integration with Sass and Less.

FAQ

What is the default port for a Next.js app?

Next.js apps, by default, start on port 3000.

Can I integrate Next.js with another backend server?

Yes, you can run Next.js with other backend solutions by managing the framework as a part of your server middleware.

How does Next.js handle routing for pages and APIs?

Next.js uses a filesystem-based routing approach. Files within the pages directory automatically become routes, and those in the pages/api/ directory become API endpoints.