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.
This guide was not written for web developers who have decided to use AMP but are unsure of what framework to use. We will note briefly however that Next.js could be a good choice because it supports AMP server-side rendering and makes it easy to serve AMP content without introducing a lot of complexity into your codebase.
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.
Try it! Check out How to use AMP in Next.js to try out the two approaches yourself.
How to decide whether to use the Hybrid AMP or AMP-only approach
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.
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.
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 guarantess fastness. But before adopting AMP you should make sure that it can support all of your site's requirements.