Tutorial on creating a NextJS Application for beginners
Tags: webdev, nextjs, javascript, tutorial
Published: 2023-06-23 19:23:56

NextJS is an **open-source** web development **framework** which provides us with extended features of **ReactJS** and gives us the building blocks to create web applications. In this article, I will explain some important points about NextJS and also build a sample NextJS application from scratch.

## Features of NextJS:
Following are some effective features of NextJS that gives it the edge over other web development technologies:

- **Page-based Routing system:** With NextJS, we don't need to install any external package from NPM or YARN to use Routing in our projects (like we install **react-router-dom** in React). We just create a page in a special folder, and NextJS creates a route for that page.

- **Pre-rendering:** NextJS supports both **Static-Site Generation (SSG)** and **Server-Side Rendering (SSR)**. Server-Side Rendering (SSR) prepares the content of a page on a server, while a one-page React application uses **Client-Side Rendering (CSR)**. The problem with CSR is that it's **not SEO-friendly** because search engines will not see the page's actual content. Using SSR in NextJS can avoid such issues as a **flickering page** while data fetching, and our website content will be SEO friendly.


![csr+ssr+ssg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1d42n0qzxiu16xfo610.png)

- **Built-in CSS and Sass support:** NextJS provides support for any CSS-in-JS library.

- **Code splitting:** NextJS allows developers to split their application code between 2 different components - **Server Component** and **Client Component**. All the Backend related code i.e. A.P.I. handling, Database integration and Data fetching should be written in Server Components whereas all the UI related code should be written in the Client Components.

- **Dynamic Components:** Using NextJS, we can also import JavaScript modules and React components dynamically.

## Creating our own NextJS application from scratch

For this tutorial, I am assuming that you have **Node.js** and **NPM** installed in your system. If not, you can follow the steps mentioned here - [https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac](https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac)


![node and npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7llja0ssewo6ddvnt9qt.gif)

I will be using the **Visual Studio Code Editor** to write and maintain my code. You can use any editor you desire, but if you want to install and configure it, follow the steps mentioned here - [https://code.visualstudio.com/learn/get-started/basics](https://code.visualstudio.com/learn/get-started/basics)


![vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxyw8hkywidyz2pdbivy.png)

Now, lets start with creating our application!

**Step 1 :** Creating a NextJS application using **create-next-app**.
We already know that we can create a ReactJS application using the **create-react-app** command. Creating a NextJS application is not much different, as we can use the **create-next-app** command.

Type in the following command in your terminal :

```
npx create-next-app blog-app
```
On typing this command, you will be asked multiple questions regarding the setup of your project. Once you answer all the questions, a new NextJS application will be created based on your requirements.

**Step 2 :** Opening the application in VS Code and viewing the folder structure.
Go to the folder in which your application is located, right-click anywhere and you will see these options:

![git bash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/narxmqfbowbnfaidyfnm.png)

Click on **Git Bash Here**. A Git Bash terminal will open, type in the following command:

```
code .
```
Your NextJS application will now be opened in V.S. Code. You can now see the folder structure :

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btn3rjc86tjxnz96fyjn.PNG)

You will see the following files and folders present:

- **next.config.js:** It is the configuration file for NextJS.

- **jsconfig.json:** It is the configuration file for JavaScript.

- **.gitignore:** It contains the Git files and folders to ignore.

- **.eslintrc.json:** It is the configuration file for ESLint.

- **src:** It is the optional application source folder.

- **app:** It is the App Router.

- **public:** It contains the static assets to be served.

- **layout.js:** It contains the Common Layout of the application.

- **package.json:** It contains the project dependencies and scripts.
 
**Step 3 :** Running your NextJS application.
Navigate to your project directory using this command:

```
cd blog-app
```
Run your application using the following command:

```
npm run dev
```
On your browser, go to [**http://localhost:3000**](http://localhost:3000) to view your application.
This should be the output on your screen:


![home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ix3du9j6l4msaoxkjhha.PNG)

**Step 4 :** Making changes in the application.
Go to **src/app/page.js**, replace the code present in the file with the following code:

```
import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <h1>Welcome to your first NextJS Application!</h1>
    </main>
  );
};

```

You will see the following output on the screen:

![output 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uezwoxwjjjrq43d532fy.PNG)

**Step 5 :** Making multiple routes for the application.
As said earlier, NextJS supports a **file-based** routing system. We do not need to install any external package to use routing in our application. 
In this step, I will show you how to create 2 routes for our blog 
application - **localhost:3000/first-post** & **localhost:3000/second-post**

Go to **src/app**, and create 2 new folders - **first-post** and **second-post**. Inside both these folders, create a new file **page.js**.

Go to **src/app/first-post/page.js**, and write the following code in it:

```
"use client"
import Link from "next/link";

function FirstPost(){
    return(
        <>
            <h1 style={{color : "#fff", position : 'absolute', top : '55%', left : '22%'}}>When to Use Static Generation v.s. <br/>Server-side Rendering</h1>
            <p style={{color : 'lightgray', fontSize : '15px', position : 'absolute', top : '68%', left : '22%'}}>June 19, 2023</p>

            <p style={{color : "#fff", position : 'absolute', top : '73%', left : '22%', fontSize : '19px'}}>We recommend using <b>Static Generation</b> (with and without data) whenever <br/>
            possible because your page can be built once and served by CDN, <br/>
            which makes it much faster than having a server render the page on every request.</p>

            <p style={{color : "#fff", position : 'absolute', top : '87%', left : '22%', fontSize : '19px'}}>You can use Static Generation for many types of pages, including:</p>

            <ul style={{color : "#fff", position : 'absolute', top : '93%', left : '25%', fontSize : '19px'}}>
                <li>Marketing pages</li>
                <li>Blog Posts</li>
                <li>E-commerce product listings</li>
                <li>Help and documentation</li>
            </ul>

            <p style={{color : "#fff", position : 'absolute', top : '110%', left : '22%', fontSize : '19px'}}>You should ask yourself: "Can I pre-render this page <b>ahead</b> of a user's <br/>
            request?" If the answer is yes, then you should choose Static Generation.</p>

            <p style={{color : "#fff", position : 'absolute', top : '120%', left : '22%', fontSize : '19px'}}>On the other hand, Static Generation is <b>not</b> a good idea if you cannot pre-<br/>
            render a page ahead of a user's request. Maybe your page shows frequently <br/>
            updated data, and the page content changes on every request.</p>

            <p style={{color : "#fff", position : 'absolute', top : '133%', left : '22%', fontSize : '19px'}}>In that case, you can use <b>Server-Side Rendering</b>. It will be slower, but the <br/>
            pre-rendered page will always be up-to-date. Or you can skip pre-rendering <br/>
            and use client-side JavaScript to populate data.</p>

            <Link href="/" style={{color : 'blue', position : 'absolute', top : '147%', left : '22%'}}>← Back to home</Link>

            <br/>
            <br/>
        </>
    );
};

export default FirstPost;
```
On your browser, visit [http://localhost:3000/first-post](http://localhost:3000/first-post), and you will see this output:

![output 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rltigq250bvcq3oowdyc.PNG)

You have created your first route **first-post**!

Now, go to **src/app/second-post/page.js**, and write the following code in it:

```
"use client"
import Link from "next/link";

function SecondPost(){
    return(
        <>
            <h1 style={{color : "#fff", position : 'absolute', top : '55%', left : '22%'}}>Two Forms of Pre-rendering</h1>
            <p style={{color : 'lightgray', fontSize : '15px', position : 'absolute', top : '62%', left : '22%'}}>April 15, 2023</p>

            <p style={{color : "#fff", position : 'absolute', top : '67%', left : '22%', fontSize : '19px'}}>Next.js has two forms of pre-rendering: <b>Static Generation</b> and <b>Server-side <br/>
            Rendering</b>. The difference is in when it generates the HTML for a page.</p>

            <ul style={{color : "#fff", position : 'absolute', top : '77%', left : '25%', fontSize : '19px'}}>
                <li><b>Static Generation</b> is the pre-rendering method that generates the <br/>
                HTML at <b>build time</b>. The pre-rendered HTML is then reused on each <br/>
                request.
                </li>
                <li><b>Server-side Rendering</b> is the pre-rendering method that generates the <br/>
                HTML on <b>each request.</b></li>
            </ul>

            <p style={{color : "#fff", position : 'absolute', top : '97%', left : '22%', fontSize : '19px'}}>Importantly, Next.js lets you <b>choose</b> which pre-rendering form to use for <br/>
            each page. You can create a "hybrid" Next.js app by using Static Generation <br/>
            for most pages and using Server-side Rendering for others.</p>

            <Link href="/" style={{color : 'blue', position : 'absolute', top : '110%', left : '22%'}}>← Back to home</Link>

            <br/>
            <br/>
        </>
    );
};

export default SecondPost;
```
On your browser, visit [http://localhost:3000/second-post](http://localhost:3000/second-post), and you will see this output:

![output 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mptehfwsfi2ajs1d07po.PNG)

You have created your second route **second-post**!

**Step 6 :** Editing the home page.
Go to **src/app/page.js**, and write the following code in it:

```
import Link from "next/link";
import "./page.module.css"

export default function Home() {
  return (
    <main>
      
      <p style={{color : "#fff", position : 'absolute', top : '67%', left : '30%', fontSize : '20px'}}>Hello World!</p>
      

      <h1 style={{color : "#fff", position : 'absolute', top : '83%', left : '30%'}}>Blog</h1>

      <ul style={{position : 'absolute', top : '91%', left : '30%', fontSize : '21px'}}>
        <li>
            <p style={{color : 'blue'}}><Link href="/first-post">When to use Static Generation v.s. Server-Side Rendering</Link></p>
            <br/>
            <p style={{color : 'lightgray', fontSize : '15px'}}>June 19, 2023</p>
        </li>
        <br/>
        <li>
            <p style={{color : 'blue'}}><Link href="/second-post">Two forms of Pre-Rendering</Link></p>
            <br/>
            <p style={{color : 'lightgray', fontSize : '15px'}}>April 15, 2023</p>
        </li>
      </ul>
    </main>
  );
};

```
On your browser, visit [http://localhost:3000/](http://localhost:3000/), and you will see this output:

![output 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9p01lc1lcwzr1s6nico.PNG)

And thats it!! You have successfully created your first NextJS application!

Now, our next and final step is to deploy it on **Vercel**

![Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svxzbv0bnmn5wthsgpyw.jpg)

Vercel is an American **cloud platform as a service** company. It maintains the NextJS web development framework. Its frontend cloud gives developers frameworks, workflows, and infrastructure to build a faster, more personalized web app. We can deploy our NextJS application on Vercel in mere minutes.

**Step 1 :** Push your NextJS application code to Github.
Go to [https://github.com/](https://github.com/) and create a repository named **nextjs-blog**.

Open your terminal in V.S. Code, and write the following commands:

```
git init
```

```
git add.
```

```
git commit -m "Initial Commit"
```

```
git remote add origin https://github.com/<Your Username>/nextjs-blog.git
```

```
git push -u -f origin master
```
You have successfully pushed your code to Github!
Your repository now should look like this:

![repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pjt0q486pc6sjesanqr.PNG)

**Step 2 :** Create a Vercel Account
First, go to [https://vercel.com/signup?utm_source=next-site&utm_medium=learnpages&utm_campaign=no-campaign](https://vercel.com/signup) to create a Vercel account. Choose **Continue with GitHub** and go through the sign up process.

**Step 3 :** Import your Repository
Once you’re signed up, import your **nextjs-blog** repository on Vercel. 

- You’ll need to **Install Vercel for GitHub**. You can give it access to **All Repositories**.

- Once you’ve installed Vercel, import **nextjs-blog**.

**Step 4 :** Deploy your application
You can use **default values** for the following settings — no need to change anything. Vercel automatically detects that you have a Next.js app and chooses **optimal build settings** for you.

- Project Name

- Root Directory

- Build Command

- Output Directory

- Development Command

When you deploy, your Next.js app will start building. It should finish in under a minute.

When it’s done, you’ll get **deployment URLs**. Click on one of the URLs and you should see the **application starter page live**.

Here is the sample URL of my NextJS application deployed on Vercel - [https://nextjs-technical-blog-website.vercel.app/](https://nextjs-technical-blog-website.vercel.app/)

And thats it! You have successfully learnt how to create and deploy a NextJS application!

Connect with me on Linkedin :- [Linkedin](https://www.linkedin.com/in/aryandev-shourie-175025229/)

Do check out my Github for amazing projects:- [Github](https://github.com/Aryan2727-debug)

View my Personal Portfolio :- [Aryan's Portfolio](https://personal-portfolio-aryan.netlify.app/)