Tutorial on creating a NextJS Application for beginners
Aryan Dev Shourie
Posted on June 23, 2023
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.
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
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
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:
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 :
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 to view your application.
This should be the output on your screen:
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:
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, and you will see this output:
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, and you will see this output:
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/, and you will see this output:
And thats it!! You have successfully created your first NextJS application!
Now, our next and final step is to deploy it on Vercel
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/ 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:
Step 2 : Create a Vercel Account
First, go to https://vercel.com/signup?utm_source=next-site&utm_medium=learnpages&utm_campaign=no-campaign 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/
And thats it! You have successfully learnt how to create and deploy a NextJS application!
Connect with me on Linkedin :- Linkedin
Do check out my Github for amazing projects:- Github
View my Personal Portfolio :- Aryan's Portfolio
Posted on June 23, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
