Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

2500+

Clients projects

1458

Happy customers

React JS

NextJs Tutorial: Getting Started with ReactJS Framework

Last Updated on June 4, 2024

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.

Bacancy is at Your Disposal.

Next.js is used in 10,000+ production-facing websites and web applications, including many of the world's largest brands. Need assistance to supercharge your product development?

Download

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.

Why Next.js?

Next.js has all the tools to make the web app faster
Next.js apps load considerably faster because of its out-of-the-box server-side rendering
Supports static-site export features
Built-in support for CSS, JSX, TypeScript, and page routing
Helps to add optimization capabilities like SSR and static-site generation

Discover More Possibilities