The creators of Next.js have released version 8.1 of the framework for creating server-side applications with React. While in the previous major release the focus was on serverless mode, with which developers can create applications for serverless computing, the implementation of AMP is the main innovation in the now released update.

As a more rigorous version of HTML, AMP is designed to provide websites with more reliable performance and better scalability. Google takes advantage of these advantages, among other things, when loading websites into the result lists of its mobile search. In order to be able to render the AMP pages faster, search engines like Google or Bing usually rely on a dedicated AMP cache.

Hybrid or AMP First Pages

Support for AMP in Next.js is for individual sites, so developers can integrate AMP into their project step by step. Two approaches are available: hybrid AMP pages, which provide a classic HTML page with an AMP version, and the so-called AMP-first pages. The hybrid approach is recommended, for example, for existing websites that are to be supplemented with an AMP version for playing on mobile devices – for example in the case of mobile search. The standard page retains typical Next.js functions such as client-side routing. To integrate an AMP page, developers use the withAmp function with the option hybrid: true :

// pages / index.js 
function HomePage () { 
  return <p> Welcome to AMP + Next.js. </ p> 
} 

export default withAmp (HomePage, {hybrid: true})

Alternatively, websites with Amp can also generally be created as AMP first pages in order to benefit from their advantages for desktop browsers as well. If users are not dependent on the Next.js runtime in their project, AMP-First can accelerate the overall development process. However, only AMP-compatible components may be used to build the website. The Next.js blog and the documentation websites serve as examples of AMP first pages in productive use.

For more information on creating AMP pages with Next.js, see the NextJS blog. The source code released under MIT license can be found on GitHub. A quick start on the project site will help you get started with Next.js and AMP.