How To Build SSR Page With Next.Js

Create Server-Side Rendering with Next.Js

Photo by Roman Synkevych on Unsplash

In this article,
I will share my experience in using next js. so I will explain step by step from the first setup onwards.

Let’s Start

  1. Make Sure you ready

Install node js, visual studio code, and extension prettier on visual studio code

2. Create Next.Js Project

Type the code above into the terminal and run.
after that, it will create a folder and then use cd (name folder). you can run with yarn dev or yarn build then yarn start.

3. Clean Up Code

Replace index.js code

Replace app.js code

Remove globals.css and home.module.css and re-run (ctrl + c and yarn dev)

4. Create File _document.js on folder pages

You can change HTML lang and custom rendering

5. Create next.config.js File on Root Folder

this file for env and we will use for base URL API (https://pokeapi.co/)

Save and Re-run

6. Modified index.js code And Re-run

use getServerSideProps to make page SSR. now you can inspect on source code and look for the pokemon name on it. by default next js already SSR but when you get data from API you must use getServerSideProps to make data show on source code and give effect for SEO.

7. Create Folder layouts on the root

Create file MainLayout.js on folder layouts. we need this component as a wrapper. we use this as a parent component on pages.

Replace index.js code

with this, we can make head global for every page with the main layout as a wrapper

next, I will share how to make this project fancier, reusable components, and how to handle responsive design.

See Project Here

Comment below if you know any other ways, commend, or questions.

Thank you :)

Web Developer, try to write something.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store