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.