nextjs amp - Javascript (1)

📌 相关文章

📜 nextjs amp - Javascript (1)

📅 最后修改于: 2023-12-03 15:03:10.191000 🧑 作者: Mango

Next.js AMP - Javascript

Next.js is a popular JavaScript framework that enables server-side rendering, automatic code splitting, and simpler configuration. It provides a great developer experience and improves website performance by reducing page loading time.

One of the features of Next.js is the ability to generate Accelerated Mobile Pages (AMP), which are lightweight and fast-loading pages designed specifically for mobile devices. AMP pages are an open-source project backed by Google and designed to provide a better browsing experience for mobile users.

How to setup Next.js AMP

To get started with Next.js AMP, you need to add the next/amp package to your Next.js project:

npm install --save next@8.1.0 next/amp

Then, update your next.config.js file to include the amp configuration option:

// next.config.js

const withAmp = require('@next/amp');

module.exports = withAmp({
  // your Next.js configuration
  amp: {
    // configuration options
    ...
  }
});

This will enable AMP support for your Next.js project.

Creating AMP Pages with Next.js

To create an AMP page in Next.js, you need to create a new file with the .amp.js extension. For example, about.amp.js would create an AMP version of the about page.

The AMP page file should contain the same content as your regular Next.js page, but with a few modifications to ensure it meets the requirements of AMP:

Import the Head component from next/head and use it to add the required meta tags to the page.
Use the amphtml-validator module to validate the AMP page and ensure it meets the required standards.
Add the amp attribute to any HTML tags that support it, like img, a, and video.

Here is an example of an AMP page in Next.js:

// pages/about.amp.js

import Head from 'next/head';
import { useAmp } from 'next/amp';

export const config = { amp: 'hybrid' };

const AboutPage = () => {
  const isAmp = useAmp();

  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=1,initial-scale=1"
        />
        <link rel="canonical" href="https://example.com/about" />
        <script
          async
          key="amp-analytics"
          custom-element="amp-analytics"
          src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
        />
      </Head>
      <h1>About Us</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget velit
        euismod, pellentesque nulla vel, tincidunt purus. Vestibulum dictum
        venenatis mauris, quis bibendum velit. Morbi elit nulla, ullamcorper nec
        neque sed, tempor consequat justo. Pellentesque scelerisque cursus
        ultricies.
      </p>
      {isAmp && (
        <amp-analytics type="googleanalytics" id="google-analytics">
          <script
            type="application/json"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify({
                vars: {
                  account: 'UA-XXXXXXXXX',
                },
                triggers: {
                  trackPageview: {
                    on: 'visible',
                    request: 'pageview',
                  },
                },
              }),
            }}
          />
        </amp-analytics>
      )}
    </>
  );
};

export default AboutPage;

This example creates an AMP version of the about page with the required meta tags, a canonical link, and an amp-analytics component for tracking pageviews. The amp attribute is added to the img tag to ensure it is rendered correctly on AMP pages.

Conclusion

Next.js AMP provides a powerful tool for creating fast-loading, mobile-optimized pages. With the ability to create AMP pages in Next.js, you can improve the browsing experience for your users and ensure your website is optimized for mobile devices.