Learn about the benefits and tradeoffs of supporting AMP in your Next.js app
AMP is a web component framework that guarantees fast page loads. Next.js has built-in support for AMP.
What will you learn?
This guide first briefly describes how AMP guarantees fast page loads, then explains the different ways you can support AMP in a Next.js app, then helps you decide which approach is best for you.
The intended audience for this guide is a web developer who has decided to use Next.js but is unsure of whether to support AMP.
How AMP guarantees fast page loads
AMP has two main strategies for guaranteeing fastness:
- AMP HTML: A restricted form of HTML that makes certain optimizations mandatory and prohibits architectural patterns that lead to slowness. See How AMP works for a high-level overview of the optimizations and restrictions.
- AMP Cache: A content cache used by some search engines, such as Google and Bing, that uses prerendering to speed up page loads. See Why AMP Caches exist to learn more about the benefits and tradeoffs of the caches and How does my AMP page get cached? to understand how your AMP pages get into the caches.
How you can use AMP in Next.js
There are two ways to use AMP in Next.js:
- The Hybrid AMP approach lets you create an accompanying AMP version of any Next.js page.
- The AMP-only approach lets you make AMP the only option for a page.
Although Next.js is usually thought of as a React framework, it's important to understand that when you use Next.js to serve AMP pages, you can no longer run React components client-side because React components are not valid AMP components. In other words, Next.js is no longer a React framework but rather a server-side templating engine for generating AMP pages.
How to decide whether to use the Hybrid AMP or AMP-only approach
If you're serious about load performance, an AMP-only page could be a good way to make sure that your page gets fast and stays fast. But here's the catch: in order to guarantee fastness, AMP prohibits certain architectural patterns and HTML elements that often lead to slow pages. For example, AMP doesn't allow custom synchronous JavaScript because render-blocking resources are a common cause of slow page loads.
In order to understand whether an AMP-only approach is right for you, you need to figure out whether all of your frontend code can be represented in AMP HTML:
- Read How AMP works to understand AMP's high-level architectural restrictions and mandatory optimizations.
- Read HTML Tags to see what HTML tags AMP allows and prohibits, browse the AMP component catalogue to see the custom components that the AMP community has built to solve common use cases, and check out amp-script to learn how to use custom JavaScript to implement features that AMP doesn't currently support.
Even if an AMP-only approach won't work for your page, it might still be a good idea to use AMP whenever possible, because of the guaranteed fastness of AMP HTML and the AMP Caches. The Hybrid AMP approach in Next.js provides a way to conditionally serve AMP pages. However, it also creates a higher maintenance cost because it requires you to maintain two versions of each page.
Conclusion
AMP guarantees that your site gets fast and stays fast by enforcing patterns that lead to fastness and prohibiting patterns that lead to slowness. AMP HTML and AMP Caches are the two main ways that AMP guarantees fastness. But before adopting AMP you should make sure that it can support all of your site's requirements.