Introduction

We all have heard about NextJs– most popular and flexible ReactJS framework that eases your development for production. It helps to create web applications faster with the following virtues:

• Hybrid static and SSR
• Supports Typescript
• Smart building
• Route pre-fetching
• No configuration needed

What Features does Next.js provide us?

These are features that Next.js provides us.

• Server-side rendering
• Automatic code-splitting
• Static exporting options
• Easy production builds

NextJS Tutorial Goal

In today’s NextJS tutorial we will cover the following:

• Create NextJS App
• Pages and Basic Routing

Create a NextJs App

# Create a new Next.js app with npx
npx create-next-app <app-name>

# Create a new Next.js app with npm
npm create-next-app <app-name>

# With yarn
yarn create next-app <app-name>

Here, we use the yarn command for creating our NextJS app. Follow the below command.

yarn create next-app next-project-demo
/**
 * project name : next-project-demo
*/

Once done with the command, below would be the success response.

Our whole project is stored in the next-project-demo. Refer to the below image for the folder structure.

Folder Structure

Run the NextJS Application

Use the below command to run our application just to test it.

cd next-project-demo // switch folder 
yarn dev  //run next.js project

Your browser will look something like this.

http://localhost:3000/

Then after page will be looks like this

Pages and Routes Set Up

Moving to the main section of the NextJs tutorial. In Next.js we can create a multi-page application using its file-based routing. And the best part is, there’s no need to install extra packages or third-party libraries like react-router-dom, or even configure a router at all.

All Next.js applications include the default /pages directory: home of application’s React Components. A router will serve a page based on the component.

/pages directory

Home Page

Open the index page and remove all codes from that file and use the below code to configure HomePage.

function HomePage() {
  return (<div>
    <h1>This is our home page</h1>
  </div>)
}

export default HomePage;

Run the App

About Page

Now if we want to add another page then we will create a file and pages folder and perform the same operation like we had done for HomePage.

Suppose we want to create an About page, simply add the about.js file in the page directory. Use the below code for the same.

function AboutPage() {
    return (<div>
        <h1>This is about page</h1>
    </div>)
}

export default AboutPage;

Run the App
Now in the browser if we mentioned /about inside route then the application will load About page.

That’s it for the NextJs tutorial for beginners. In the next guide, we will discuss more file-based Routing and linking with multiple pages.

Conclusion

We hope the NextJs tutorial has helped you to get started with NextJS– ReactJS framework. We will surely come up with interesting and informative NextJS tutorials soon. Well to build your web application faster connect with our Reactjs development company and explore ReactJS with Bacancy! Feel free to write back to us your feedback or queries.