6.5 C
New York
Monday, August 15, 2022

JavaScript: Next.js 8.1 is learning AMP

Must Read

Are New Blood Pressure Monitoring Devices Better Than Basic Cuffs?

Nearly half of American adults have had their hypertension diagnosed, and patients are often encouraged to get...

High School Students Add Two New Species Of Scorpions To California’s Rich Biodiversity

California now boasts two new scorpion species, owing to the efforts of two Bay Area high school...

Humor As Holy War: The Secret World of Jihadi Terrorists

Scientists who studied 82 English-language Islamist magazines concluded that Al Qaeda and the Taliban regularly use parody...
Aakash Molpariya
Aakash started in Nov 2018 as a writer at Revyuh.com. Since joining, as writer, he is mainly responsible for Software, Science, programming, system administration and the Technology ecosystem, but due to his versatility he is used for everything possible. He writes about topics ranging from AI to hardware to games, stands in front of and behind the camera, creates creative product images and much more. He is a trained IT systems engineer and has studied computer science. By the way, he is enthusiastic about his own small projects in game development, hardware-handicraft, digital art, gaming and music. Email: aakash (at) revyuh (dot) com

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.

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.

- Advertisement -


Comments are closed.

- Advertisement -

Latest News

- Advertisement -

More Articles Like This

- Advertisement -