--- title: "Enabling AMP in your Next.js projects" description: "Want to use AMP in your Next.js projects? Want to know more about what AMP is? Learn both now!" source: "https://www.netlify.com/blog/2020/12/19/enabling-amp-in-your-next.js-projects/" last_updated: "2026-08-05T06:02:58.000Z" --- Welcome to Blogvent, day 19! Did you know that Next.js supports AMP out of the box? Here’s how you can build with it! ## What is AMP? [AMP](https://amp.dev/) stands for Accelerated Mobile Pages. It’s an open source framework developed originally by Google, optimized for mobile web browsing, to help webpages load faster. It works by: - Executing AMP JavaScript asynchronously - Statically sizing resources like images, ads, and iframes - Stopping extensions from blocking page rendering - Only allowing third-party JavaScript in sandboxed framers - Only allowing inline CSS + minimizing style recalculations - Only running GPU-accelerated animations - Controlling all resource downloads - Using the [preconnect API](https://www.w3.org/TR/resource-hints/#dfn-preconnect) to pre-render a page before a user navigates to it ## How do I add it to my Next.js application? Add the following line to your page component: ``` export const config = { amp: true } ``` This enables AMP for your page! That `amp` property can be either `true` or `'hybrid'`. When it’s `true`, that means your page will be AMP-only, and if it’s `'hybrid'` the page will have both an AMP version and an HTML version. ### AMP-only pages AMP-only pages will have no React code run client-side, and [AMP Optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer) is automatically applied to it. ### Hybrid AMP In this mode, you can use the `useAmp()` hook by importing it at the top of your page: ``` // at the topimport { useAmp } from 'next/amp' // in your componentlet isAmp = useAmp() // returns true or false ``` With this, you can return AMP components or HTML based on if `isAmp` is true or false. As for the AMP components you can use on the page, in both modes, they’re built in! Use a component from the [AMP Component Catalogue](https://amp.dev/documentation/components/) and Next.js will detect it and automatically import it for you. ## Caveats You do get all the benefits mentioned above when using AMP in your Next.js projects, but there are two things you can’t use currently: - CSS Modules - You can only use CSS-in-JS libraries with AMP pages. - TypeScript - AMP doesn’t have built in types for TypeScript yet. These things are actively being worked on at the time of writing, but as of right now you cannot use these. ## I’d like to build something with Next.js + AMP! Heck yeah! Here’s a starter application to try this out yourself: [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter&utm_source=blog&utm_medium=nextstarteramp-cs&utm_campaign=devex) (Clicking this button will deploy a Next.js starter project to Netlify, and clone it to your chosen Git provider) You can also [read more about AMP here](https://amp.dev/)! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Enabling AMP in your Next.js projects&url=https://www.netlify.com/blog/2020/12/19/enabling-amp-in-your-next.js-projects//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F19%2Fenabling-amp-in-your-next.js-projects%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/19/enabling-amp-in-your-next.js-projects//) - [Bluesky](https://bsky.app/intent/compose?text=Enabling AMP in your Next.js projects+https://www.netlify.com/blog/2020/12/19/enabling-amp-in-your-next.js-projects//) * * * ### Tags - [Next.js](/blog/tags/next.js/) - [blogvent](/blog/tags/blogvent/) - [amp](/blog/tags/amp/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials December 2, 2020 [ ### Next.js: Should I use SSR or SSG? ](/blog/2020/12/02/next.js-should-i-use-ssr-or-ssg/) - ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp) Cassidy Williams ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials November 30, 2020 [ ### How to Deploy Next.js Sites to Netlify ](/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/) - ![Profile picture of Jason Lengstorf](/_astro/11b8e51d90b26838de71904294430279b7099995-700x700_1R7sJe.webp) Jason Lengstorf ## Recent posts Opinions & Insights July 28, 2026 [ ### Open Weights and the 2nd World ](/blog/open-weights-and-the-2nd-world) - ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp) Mathias Biilmann Tools & Services July 28, 2026 [ ### MCP goes stateless and extensible ](/blog/mcp-goes-stateless-and-extensible) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements July 28, 2026 [ ### New Netlify projects are now private by default ](/blog/new-netlify-projects-are-now-private-by-default) - ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp) Taylor Barnett-Torabi ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)