TABLE OF CONTENTS

Subscribe for
weekly updates

newsletter

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

Copy Text
# 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.

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

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

Create a NextJS App

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

cta img
Resource img

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

Folder Structure

Run the NextJS Application

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

Copy Text
cd next-project-demo // switch folder 
yarn dev  //run next.js project
Run the NextJS Application

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

pages directory

Home Page

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

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

export default HomePage;

Run the App

Home page

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.

Copy Text
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.

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

Get In Touch

[email protected]

Your Success Is Guaranteed !

We accelerate the release of digital product and guaranteed their success

We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.