Now web developers must build web load faster to improve user experience and search engine ranking, make less bounce rate, and make more traffic. AMP pages load near instantly, so let’s try AMP Pages with Next Js.

I’m using an existing project from the previous article. we will make the pokemon list fancier with styled-components. you can clone here and use branch styled-components.

1. Enabling AMP

To enable AMP supports you must add this code on-page files. for example index.js.

export const config = { amp: true }

More information about it

Use an AMP validator to check your AMP Page work.

You can write the actual CSS code to style your components. it also removes the mapping between component and style. for me, it’s better than CSS/SASS/SCSS. styled component

I’m using an existing project from the previous article. we will make the pokemon list fancier with styled-components. you can clone here and use branch init.

1. Add a styled component to the project

yarn add styled-components

2. Make Header Component

The header for example and you can try others later with your way. create components folder on the root. inside folder component create folder Header.

Create file StyledHeader.js and create components with styled-components.

import styled from "styled-components";const StyledHeader = styled.div`padding: 0;…

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

1. 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…