工程開發 Engineering > :hamburger: 前端架構 Front-End Stack > AMP前端架構 Accelerated Mobile Pages

繁體 | 简体 | English


AMP主要概念理想


支持AMP的React.js架構

架構 HTML建立時刻 需要server? 適合使用網頁
Next.js Real Time 需要 比較複雜或多網頁時
Gatsby.js Build Time 不需 比較小的網頁,blogs


如何在Next.js架構裡實作AMP

Hybrid AMP

pages/home.js

import { useAmp } from 'next/amp'

export const config = {
  amp: 'hybrid'
}

export default () => {
  const isAmp = useAmp()
  return (
    <div>
      <p>{isAmp ? 'Not AMP Home Page' : 'Home Page'}</p>
    </div>
   )
}

AMP-only

pages/index.js

import Nav from '../components/nav'
import { useAmp } from 'next/amp'

export const config = {
  amp: true
}

線上資源


AMP及CSS的一些結合問題

Styled-JSX Webpack Loader

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

CSS-in-JS

function HiThere() {
  return <p style=>hi there</p>
}

export default HiThere

Importing CSS / Sass / Less / Stylus files

線上資源