How To Build SSR Page With Next.Js
Create Server-Side Rendering with Next.Js
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
- Make Sure you ready
Install node js, visual studio code, and extension prettier on visual studio code
2. Create Next.Js Project
npx create-next-app (name_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
export default function Home() { return <></>;}
Replace app.js code
function MyApp({ Component, pageProps }) { return <Component {…pageProps} />;}
export default MyApp;
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
import Document, { Html, Head, Main, NextScript } from "next/document";class MyDocument extends Document {static async getInitialProps(ctx) {const initialProps = await Document.getInitialProps(ctx); return { ...initialProps };}render() { return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); }}export default MyDocument;
5. Create next.config.js File on Root Folder
this file for env and we will use for base URL API (https://pokeapi.co/)
module.exports = { env: { baseUrlApi: "https://pokeapi.co/api/v2/", },};
Save and Re-run
6. Modified index.js code And Re-run
export default function Home(props) {const { data } = props;return (<div>{data.results.map((pokemon,i) => {return <div key={i}>{pokemon.name}</div>;})}</div>);}export async function getServerSideProps() {// Fetch data from external APIconst res = await fetch(`${process.env.baseUrlApi}pokemon?limit=10`);const data = await res.json();// Pass data to the page via propsreturn { props: { data } };}
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.
import Head from "next/head";export default function MainLayout(props) {const { children } = props;return (<><Head><title>Pokemon</title></Head><div>{children}</div></>);}
Replace index.js code
import MainLayout from "../layouts/MainLayout";export default function Home(props) {const { data } = props;return (<MainLayout>{data.results.map((pokemon, i) => {return <div key={i}>{pokemon.name}</div>;})}</MainLayout>);}export async function getServerSideProps() {// Fetch data from external APIconst res = await fetch(`${process.env.baseUrlApi}pokemon?limit=10`);const data = await res.json();// Pass data to the page via propsreturn { props: { data } };}
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.
Comment below if you know any other ways, commend, or questions.
Thank you :)
