Next.js - Pages

Pages in Next.js correspond to routes in the application.
They are React components stored in the pages directory.
Pages are automatically mapped to URLs based on their file names.

1. Basic Page Structure

To create a basic page in Next.js, simply create a new file in the pages directory and export a React component. The file name will be used as the route.

Create a new file in the pages directory, for example, about.js.
Export a React component from the file, such as:

import React from 'react';

const AboutPage = () => {
    return (
        <div>
            <h1>About Us</h1>
            <p>This is the about page.</p>
        </div>
    );
};

export default AboutPage;

The file name, in this case, about.js, will determine the URL of the page, which would be /about.

2. Dynamic Routing

Next.js supports dynamic routing, allowing you to create dynamic routes based on parameters in the URL. This is achieved using file-based dynamic routing and catch-all routes.

For example, to create a dynamic route for blog posts:

Create a file named [slug].js in the pages/posts directory.
Inside this file, you can access the slug parameter using Next.js's useRouter hook or getStaticPaths method.
Here's an example:

// pages/posts/[slug].js
import React from 'react';
import { useRouter } from 'next/router';

const Post = () => {
    const router = useRouter();
    const { slug } = router.query;

    return (
        <div>
            <h1>Post: {slug}</h1>
        </div>
    );
};

export default Post;

3. Nested Routes

You can create nested routes in Next.js by organizing your files and folders accordingly. This allows for hierarchical page structures within your application.

For example:

Create a directory named products inside the pages directory.
Inside the products directory, create a file named [category].js for category pages and another file named [category]/[product].js for product pages.
Here's a basic example of nested routes:

// pages/products/[category].js
import React from 'react';
import { useRouter } from 'next/router';

const Category = () => {
    const router = useRouter();
    const { category } = router.query;

    return (
        <div>
            <h1>Category: {category}</h1>
        </div>
    );
};

export default Category;

// pages/products/[category]/[product].js
import React from 'react';
import { useRouter } from 'next/router';

const Product = () => {
    const router = useRouter();
    const { category, product } = router.query;

    return (
        <div>
            <h1>Product: {product} in Category: {category}</h1>
        </div>
    );
};

export default Product;

4. API Routes

Next.js allows you to create API routes using the pages/api directory. These routes handle requests from client-side code and can be used to implement server-side logic.

For example:

Create a file named hello.js in the pages/api directory.
Inside this file, export a default function that takes req and res as parameters and sends a JSON response.
Here's an example:

// pages/api/hello.js
export default function handler(req, res) {
    res.status(200).json({ message: 'Hello from Next.js API' });
}

5. Error Handling

Next.js provides built-in error handling capabilities, making it easy to handle errors that occur during rendering or API requests. Custom error pages can also be implemented for different HTTP status codes.

Conclusion

Pages are the building blocks of Next.js applications, representing individual routes and encapsulating their logic. With support for dynamic routing, nested routes, API routes, and error handling, Next.js offers a flexible and powerful solution for building modern web applications.

Archive

Nextjs Pages