How to build a webpage with Next.js

Next.js is a JavaScript framework developed by Vercel, based on the React library.

In React, we can only render components on the client side, but with the introduction to Next.js, we can now render components on the server side. We can do so by rendering the web page on the server and sending the rendered HTML to the client's browser.

Before we dive into how to build a webpage, we would first need to create a Next.js application.

Steps to follow

Application setup

  1. We must ensure we have NodeJs version 16.8 or later and the node package manager (npm). To install NodeJs and npm, we use the following commands:

curl -sL https://deb.nodesource.com/setup_18.x | -E bash - &&
apt-get install -y nodejs &&
npm install -g npm@latest
Commands to install nodejs and npm

  1. The next step is to install React, Next.js, and npx. We will enter the following command to install these dependencies.

npm install next@latest react@latest react-dom@latest &&
npm install -g npx
Commands to install required packages

  1. To create a sample startup project with npx we will execute the command below.

npx create-next-app@latest
Command to create NextJs application

  1. After running this command, we should have to configure many other additional options, as seen below.

What is your project named? my-app
Would you like to use TypeScript with this project? No
Would you like to use ESLint with this project? No
Would you like to use Tailwind CSS with this project? No
Would you like to use `src/` directory with this project? Yes
Use App Router (recommended)? Yes
Would you like to customize the default import alias? No
Input promts for a simple NextJs application

  1. Now we should have a sample Next.js project in the current folder.

  2. To start our application, we can navigate into the project folder (my-app) and run the command below:

npm run dev
Command to run application

Understanding the file structure

Before we move on to creating a new web page, we must first understand the Next.js project file structure. Our folder hierarchy should look like the one shown below.

Next.js application file structure
Next.js application file structure

The two most important directories we will discuss are the public and the src directories.

  • The public directory contains all the static files that can be accessed directly by any web application user by simply appending the file name along with the website URL.

Public folder structure
Public folder structure

  • The src folder contains the app folder, which essentially contains all the available routes in the application. This is where we create and modify web pages.

src folder structure
src folder structure

Creating a new page route

As we have studied above, Next.js uses a file-based routing system. This means that folders are used to define the routes in a Next.js application.

A special file called page.js is used to make the route accessible. We can use the folder with the page.js file to store other components that the web page may have.

Below we can see a diagram. The diagram shows the file structure we must follow to create a route.

New route structure
New route structure

In the file structure shown above, we also see another unique special file called layout.js.

A layout is a user interface that is shared among multiple web pages in the application. We can define a layout by default exporting a React component in the layout.js file. The component will accept a children prop that will be filled with another layout or a specific page's content when the layout is rendered.

Below we can see the contents of our layout.js file. Any components that are passed down as children to the HelloLayout component will be rendered here.

export default function HelloLayout({
  children, // will be a page or nested layout
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}
Contents of layout.js file

Note: The name of the folder will be same as the route which will be used to access the webpage.

Creating a new web page

Now that we have understood how a new route is created, a Next.js application. Our next task is to create a new web page for that specific route.

We must populate our hello.js file in our project's ./src/app/hello directory. In this file, we will create a simple component that will render Hello World.

Below are the steps we will follow to create this webpage.

  1. First, we will move to the hello folder, which is contained in the src folder.

  2. Once we are in the hello folder, we will create two new files (if already not created), namely page.js and layout.js.

  3. The contents of our layout.js file can be seen in the code snippet above.

  4. In the page.js file, we will default export a component. We can name this component Hello. Inside this component, we will return a h1 tag that would enclose a Hello World statement. Below is the code for our page.js file.

export default function Hello() {
  return (
    <h1>Hello World</h1>
  )
}
Contents of page.js file

  1. Now if we save all the changes we have made and visit the new route by accessing the link <URL>/hello, we should see that a new webpage opens up with Hello World written in it. If it does, we have successfully created a webpage in our Next.js application.

Sample Next.js project

Below is a sample project application that encapsulates all the steps we have gone through above.

Note: To visit the created hello route, add /hello after the link reflecting "Your app can be found at: <link> in the widget below.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
A sample NextJs application with a /hello route

In the application above, we can see the /hello route that we have configured, and if we open the link <URL>/hello we see a webpage that prints "Hello World".

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved