Select Page

Create your first NextJS project: Adding first pages to NextJS project

by | May 5, 2023

Next.js is a popular framework for building server-side rendered, React applications. With Next.js, you can create high-performance websites and web applications that are optimized for SEO and user experience. In this tutorial, we’ll show you how to create a Next.js project and what you need to get started.

Prerequisites to create NextJS project

Before we start, make sure you have the following installed on your computer:

Node.js (v10.13 or later)
npm (v6.0 or later)
You can download and install Node.js and npm from the official website:

Step 1: Create a new NextJS project

To create a new Next.js project, you can use the create-next-app CLI tool, which is a convenient way to set up a new Next.js project with all the necessary dependencies.
Open your terminal and run the following command:

npx create-next-app my-next-project

Replace my-next-project with the name of your project.
This will create a new Next.js project in a folder named my-next-project. The create-next-app tool will install all the necessary dependencies and set up a basic project structure.

Creating next.js project, npx create-next-app my-first-app

Step 2: Run the development server

To run the development server, navigate to your project directory (my-next-project in this example) and run the following command:

npm run dev

This will start the development server and open your Next.js application in your default web browser at http://localhost:3000.

Step 3: Customize your project

Now that you have a basic Next.js project up and running, you can start customizing it to fit your needs.

Adding pages into Next.js project

Next.js uses a file-based routing system, which means that each page in your application corresponds to a file in the pages directory.

This is the initial structure of the project after creation using create-next-app:

Create your first next.js project, initial project structure

Now let’s modify the structure for our needs. We can remove the api folder into the pages folder and from the styles we can delete the home modules style.
And to get started with next.js we will create 3 simple pages, home page, news and news details.

The index.js file contains a regular react component, and this is always the home page of the application. This is the same as standard websites where index.html is the root page. Next in the pages folder we can add a news.js file that will be loaded when we reach Later on we will add a third file but now let’s start with these two.

In the index.js file we will create a simple react functional component.


export default function Home(){
return (
<h1>Home Page</h1>

And also for the news page we can add one functional component with just a heading for now like this:


export default function NewsPage() {
   return (
       <h1>News Page</h1>

Now, if you run the development server using npm run dev the app will be opened on localhost:3000 and we can see the heading that we wrote in the jsx file. If we add /news into the url we can see the news page/

After the creation of these 2 pages, we can inspect the source code in the browser and we will notice that we do not only have a skeleton as in a react application, but we have the actual page content, which means pages are pre rendered on the server. This will prevent the flickering of the page when loading and the search engines will see the content.

Create your first NextJS project - source code

This leads to the conclusion that we are using the built in server side rendering without any additional setup.

In the next blog post we will see how to create the news details page and we will learn how to add nested pages.



Submit a Comment

Your email address will not be published. Required fields are marked *

Looking For Something?

Follow Us

Related Articles

Understanding Layouts in React

Understanding Layouts in React

If you're someone who works with React, you might think you know what a layout is. But, do you really? React, a popular JavaScript library for building user interfaces, employs the concept of layouts to organize and structure web applications. Despite its widespread...

Solving CORS Errors in React: A Step-by-Step Guide

Solving CORS Errors in React: A Step-by-Step Guide

What is Cross-Origin Resource Sharing (CORS)? The Concept Cross-Origin Resource Sharing, commonly known as CORS, is a security feature implemented by web browsers. Its primary function is to control web page requests made by scripts running on one domain to another...

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!