Routing with Next.js Pages

Provide an example of file-based routing by creating a new page in the pages directory and showing how Next.js automatically creates routes based on file names.

import Link from 'next/link';
import React from 'react';

const HomePage = () => (
    <div>
        <h1>Welcome to the Home Page</h1>
        <Link href="/about">
            <a>About Us</a>
        </Link>
    </div>
);

export default HomePage;

This is the index.js file located in the 'pages' directory. It represents the home page of the Next.js application. The Link component from 'next/link' is used for client-side transitions between routes.

import React from 'react';

const AboutPage = () => (
    <div>
        <h1>About Us</h1>
        <p>This is the about page of our Next.js application.</p>
    </div>
);

export default AboutPage;

This code snippet would be placed in a file named 'about.js' inside the 'pages' directory. Next.js automatically creates a route for this file at '/about'. The AboutPage component is the default export of this file.