How to enable AMP in Next JS?
This one is crucial. Next JS interview question to practice and remember all its aspects. There are two processes to enable AMP in Next JS. The thing to remember here is, AMP is a crucial part of many Next JS interview questions, so we would advise it to practice well.
- AMP-First Pages
These are served to the primary traffic of the website as well as traffic generated from the search engine. We have to use the following syntax to implement AMP-first pages.
- Hybrid AMP Pages
Hybrid AMP pages allow users to have a coexist AMP version of a traditional page so that search engines can easily display the AMP version or the page in different mobile search results. To implement Hybrid AMP to pages, we have to use the following syntax.
<
Example
AMP-First Pages :-
// 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 :-
// pages/index.js
function HomePage() {
return <p> Welcome to AMP + Next.js.</p>
}
export default withAmp(HomePage, { hybrid: true })