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 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

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

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.

This package makes creating styled components quick and easy.

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

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