This is an important question and is asked in many Next.js interview questions. There are two ways to enable AMP in Next.js.
* AMP-First Pages
* Hybrid AMP Pages
AMP-First Pages : The AMP-First Pages are served to the primary traffic of the website as well as traffic generated from the search engine. Use the following syntax to implement AMP-first pages.
Example :
// pages/index.js
import { withAmp } from 'next/amp'
function HomePage() {
return <p> Welcome to AMP + Next.js.</p>
}
export default withAmp(HomePage)
Hybrid AMP Pages : The Hybrid AMP pages allow the users to have coexisted AMP version of a traditional page so that the search engines can display the AMP version or the page in different mobile search results.
See the following example to understand how to implement the Hybrid AMP to pages :
Example :
// pages/index.js
import { withAmp } from 'next/amp'
function HomePage() {
return <p> Welcome to AMP + Next.js.</p>
}
export default withAmp(HomePage)
