But for a production website I'd probably use the Hybrid mode and implement all interactive features with React, while having simpler AMP pages. With this quick experiment I wanted to see if it's possible to create a dynamic and interactive website using only AMP components and it is. In this example I used only a couple of components, but the AMP component catalog is pretty large. Using it is as simple as loading the required script using Next.js component on a page where we want to display social buttons: Īnd adding a separate element for every social platform that we want to include: can be used to display a social share button for various platform providers. I used responsive so that it automatically resizes to fit the available space. The layout attribute determines how the image behaves. is very similar to the regular HTML element, but must be given an explicit width and height. The important part is that the on attribute includes the ID that was used for ( sidebar in this case). To add a "hamburger" menu button to the header, I used this code: I also included the script because isn't part of the main AMP script. If you are using the Yoast SEO plugin, then we also recommend enabling the Meta Tags from Yoast and Yoast Description in ld+jason options. We recommend enabling the Meta Description option. It was necessary to place it inside the _document.js file because must be a child of the element. The SEO screen is probably one of the most important, as this pertains to how Google will see and rank your AMP content. To convert it to an AMP page, we only need to add export const config = export default MyDocument Here's a simple page: // pages/index.js const Index = ( ) => ( Next.js AMP Example ) export default Index Implementing AMP with Next.jsĪMP support in Next.js can be defined on a per-page basis and for each page we can specify one of two modes: AMP First Pages I don't have an AMP website in production yet, but now that it's possible to easily implement it with React and Next.js, I decided to experiment. Whether to implement AMP on a website has been a controversial topic ever since AMP has been introduced. To learn what's coming to AMP, check out the videos from AMP Conf, held in Tokyo on April 17/18. Custom JavaScript isn't allowed, although some JavaScript APIs will be supported in the future via an element. Some HTML elements are replaced with AMP specific elements (for example, we need to use instead of ). With AMP Cache support, AMP pages can appear to load instantly when visited from Google and Bing search results.Īt its essence, AMP is a stripped-down version of HTML. In this post we'll explore how to set up AMP pages with Next.js.ĪMP is an open-source web framework aimed at providing a way to create high-performance websites. A new Next.js 8.1 release with support for authoring AMP pages has been introduced last week.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |