19 March 2021
Reading time: 5 min
AMP is a Google development for creating accelerated mobile pages. Basically, it is a simplified HTML form that is lightweight and very fast to load. In this article, we will not go into detail about the internals of the AMP technology itself, but will demonstrate how you can create such pages in applications built on Next.
So, first we need to install a simple Next app using the command: npx create-next-app. Next, in the index.js file, add the following export.
export const config = {
amp: true
}
That's all! Our application is now ready to use AMP pages.
AMP pages use special tags for some elements, for example, for images - <amp-img>, for sidebar - <amp-sidebar>, for carousel - <amp-carousel>, and so on. The full list can be viewed here.
As an example, let's make a simple application that contains text, a carousel with pictures, and a side menu.
Pay attention to the code:
As you can see, special components are used here such as amp-carousel, amp-sidebar and amp-img, and the following tags are used to style the components: <style jsx> </style> (for local styles) and <style jsx global> </style> (for global styles).
Now let's make it so that the data about the images (link and sizes) are received from the server. For this we will use getServerSideProps.
As a result, we got exactly the same application, but the data was received from the API.
You can also use a hybrid approach. It creates an AMP version for the Next.js page. This approach is used when AMP is a stripped-down version of the main page (it does not have all the functionality of the page due to the fact that it cannot support some functions), and the main version of the page has full functionality. With the advent of amp-script, this approach has been used much less often, but it is still sometimes used.
In order to use the hybrid approach, you just need to change true to hybrid when exporting the configuration to index.js.
To get the current state of the page (AMP / not AMP), you can use the useAmp hook and, depending on it, render one or another component.
AMP technology has evolved rapidly in recent years. Using such pages will allow you to rise in the search engine rankings, and will also give users the ability to view pages even with a slow Internet connection.
read more
