If you want to make a website for a blog, document, or static page, you’re probably considering using Markdown. Markdown allows you to transform plaintext into an HTML tag. Most developers are familiar with Markdown.

Photo by Roman Synkevych on Unsplash

You want to optimize for writing and spend less time on coding. Imagine you must code like this for a static page. no problem if the content short, but if long I think it’s better to use Markdown. Rather than writing HTML like this:

<p>
<strong>I am</strong> using <a href="https://nextjs.org/">Next.js</a>
</p>

Instead, you can use Markdown to express your styling:

**I love** using [Next.js](https://nextjs.org/)

Next…


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.

Photo by Roman Synkevych on Unsplash

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

Photo by Roman Synkevych on Unsplash

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

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

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…

Jetly Sandita

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