Creating AMP Pages with Next.js

Creating AMP Pages with Next.js

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.

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.

Image for post

Image By Jetly Sandita

Or you can check inspect and look at the console.

Powered by AMP ⚡ HTML – Version 2011252111003 http://localhost:3000/

If you see errors from the AMP validator you must fix it but for this.

Tag 'html' marked with attribute 'data-ampdevmode'. Validator will suppress errors regarding any other tag with this attribute.

You can ignore it because it’s fixed after a build. and in our case, we must fix this.

The attribute 'height' may not appear in tag 'div'.

Carefully when use props, change height to customHeight.

javascript nextjs programming styled-components amp

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Server side rendering Styled-Components with NextJS

Server side rendering Styled-Components with NextJS - I switched to styled-components for most of my projects nearly a year now but never used it with Next.js until recently. This might be a bit late to the party but I feel it’s definitely worth sharing the neat trick of ServerStyleSheets...

Why I love styled-components

Does CSS in JS makes sense? Everyone has probably heard about them by now, though many have been probably been scared off by hearing the words “CSS in JS”. I wouldn’t blame them, I was very pessimistic when I first heard that word combination.

Creating React Components with Styling with the styled-components Package

This package makes creating styled components quick and easy.

JavaScript-Less Static SSR Using Styled Components

Building a site with React, but that doesn’t have JavaScript in the final build is a paradox.

The Advanced Way to Style with Styled Components

After learning the basics, I set about migrating my codebase to Styled Components. In doing so, I gradually uncovered some issues and inefficiencies.