File-Based Routing

Next.js uses a simple and intuitive file-based routing system. Each file you create inside the "pages" directory becomes a route in your Next.js application. For example, creating a file named about.js in the "pages" directory will automatically create a route accessible at /about.

Creating a New Page

Let's create your first Next.js page. Inside the "pages" directory of your Next.js project, add a new JavaScript file with a .js extension. This will define your page component. Here's a simple example:

// pages/about.js
import React from 'react';
function AboutPage() {
    return (
        <div>
            <h1>About Us</h1>
            <p>Welcome to our About Us page.</p>
        </div>
    );
}
export default AboutPage;
                

In this example, we've created an "About Us" page that displays a heading and a short description.

Accessing Your New Page

Once you've created the page, you can access it by visiting the corresponding route in your Next.js application. In this case, you can access the "About Us" page at /about.

Start your Next.js development server if it's not running already:

npm run dev
                

Then, open your web browser and navigate to http://localhost:3000/about to see your new page in action.