How to Create Pages in Next.js

Introduction

Creating pages in Next.js is a straightforward task. Let's break it down step by step. In this article, we will look at how to create pages, how to write some simple code in those pages, and how everything works together.

The Basics of Next.js Pages

Next.js is a React framework that helps you build web applications. One of its key features is how it handles pages. The structure of your Next.js project is important, especially the pages folder. Here's the thing: every file you create in the pages folder automatically becomes a route. This means that you can access it using the URL that matches the file name.

Creating a Page

To create a new page, follow these steps:

1. Open your Next.js project folder.
2. Find the pages folder.
3. Create a new file. The name of this file will define your URL. For example:

about.js

• Write React code inside this new file.

For instance, if you create a file called about.js, you can access it by going to yourwebsite.com/about.

Adding Content to Your Page

Now that you have a page set up, you need to add some content to it. Here's a simple example of what you can write in about.js:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This page tells you about our website!</p>
    </div>
  );
};

export default About;

In this code, we import React and then create a functional component called About. Inside this component, we return some HTML that will be shown on the page. Remember, the file name is about.js, so this will show up at yourwebsite.com/about.

Viewing Your Page

Once you have saved your file, you need to run your Next.js app to see how it looks. Open your terminal and run:

npm run dev

This command starts a local server. Usually, you can view your app by going to http://localhost:3000 in your web browser. If you navigate to http://localhost:3000/about, you should see your new About page displayed!

Dynamic Pages in Next.js

Next.js also allows you to create dynamic pages. Sometimes, you may want to create a page that has a URL that changes based on some data. To do this, you'll use square brackets in your file name. For example:

[id].js

This file will handle URLs like localhost:3000/1 or localhost:3000/2. Here's a simple way to set it up:

import React from 'react';

const Post = ({ id }) => {
  return <h1>Post ID: {id}</h1>;
};

export async function getServerSideProps(context) {
  const { id } = context.params;
  return {
    props: { id }, // will be passed to the page component as props
  };
}

export default Post;

In this code, getServerSideProps helps fetch data based on the URL. So, when you go to localhost:3000/1, it will show "Post ID: 1".

Conclusion

Creating pages in Next.js is easy and powerful. You just need to add files in the pages folder, write your React code, and you are good to go. Whether you are making static pages or dynamic ones, Next.js makes it simple. So, start building and enjoy creating your website!