--- title: AMP description: With minimal config, and without leaving React, you can start adding AMP and improve the performance and speed of your pages. url: "https://nextjs.org/docs/14/pages/building-your-application/configuring/amp" version: 14.2.35 lastUpdated: 2023-06-13 prerequisites: - "Building Your Application: /docs/14/pages/building-your-application" - "Configuring: /docs/14/pages/building-your-application/configuring" ---
Examples * [AMP](https://github.com/vercel/next.js/tree/canary/examples/amp)
With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React. You can read more about AMP in the official [amp.dev](https://amp.dev/) site. ## Enabling AMP To enable AMP support for a page, and to learn more about the different AMP configs, read the [API documentation for `next/amp`](/docs/pages/building-your-application/configuring/amp). ## Caveats * Only CSS-in-JS is supported. [CSS Modules](/docs/pages/building-your-application/styling) aren't supported by AMP pages at the moment. You can [contribute CSS Modules support to Next.js](https://github.com/vercel/next.js/issues/10549). ## Adding AMP Components The AMP community provides [many components](https://amp.dev/documentation/components/) to make AMP pages more interactive. Next.js will automatically import all components used on a page and there is no need to manually import AMP component scripts: ```jsx export const config = { amp: true } function MyAmpPage() { const date = new Date() return (

Some time: {date.toJSON()}

.
) } export default MyAmpPage ``` The above example uses the [`amp-timeago`](https://amp.dev/documentation/components/amp-timeago/?format=websites) component. By default, the latest version of a component is always imported. If you want to customize the version, you can use `next/head`, as in the following example: ```jsx import Head from 'next/head' export const config = { amp: true } function MyAmpPage() { const date = new Date() return (