Next

[xiaotiandada]

• https://nextjs.org/learn/foundations/about-nextjs

next/image

• https://nextjs.org/docs/messages/sharp-missing-in-production
• https://www.npmjs.com/package/sharp
• https://www.npmjs.com/package/@squoosh/lib

SEO

• https://nextjs.org/learn/seo/introduction-to-seo （TODO）
• https://github.com/garmeeh/next-seo
• https://nextjs.org/docs/advanced-features/measuring-performance

next-seo images 参数是一个数组，大部分情况都是使用最后一张作为封面。如果需要特定图片作为封面可只设置一张。

• seo #107 seo 部分可以参考

PWA

• https://github.com/shadowwalker/next-pwa
• https://lavas-project.github.io/pwa-book/chapter06/1-manifest-json.html
• https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Add_to_home_screen

Tip: Put the viewport head meta tag into _app.js rather than in _document.js if you need it.

• Adding viewport meta tag to custom Document results in Next.js logging a warning shadowwalker/next-pwa#99

Layout

• https://nextjs.org/docs/basic-features/layouts
• https://github.com/vercel/next.js/tree/canary/examples/layout-component
• https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

Vercel

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)

Error: No more than 12 Serverless Functions can be added to a Deployment on the Hobby plan. Create a team (Pro plan) to deploy more. Learn More: https://vercel.link/function-count-limit

https://cant-xt.vercel.app/docs/folder-structure/next 一些 serverless limit 规则

Header

SharedArrayBuffer

• https://nextjs.org/docs/advanced-features/security-headers

嵌入 iframe 需要支持 SharedArrayBuffer, 父级需要定义 header. 一些相关记录

#111
#112
#113

[
  {
    key: 'Cross-Origin-Embedder-Policy',
    value: 'require-corp',
  },
  {
    key: 'Cross-Origin-Opener-Policy',
    value: 'same-origin',
  },
]

iframe 源也开启了会被拒绝链接

页面

第一次进入页面会 SSG 渲染页面。但是只在 /game 页面下定义了 header 参数，故首页无参数。

[.   
    {
        source: '/game/:path*',
        headers: COEPHeaders,
      },
      {
        source: '/zh-CN/game/:path*',
        headers: COEPHeaders,
      }
]

• 如果直接从 /game 路由下进入响应 header
• 如果从首页/其他页面 进入 /game 路由则不会响应 header
• 切换页面返回数据 应该是客户端渲染 CSR https://juejin.cn/post/6925308376976982029
  • /_next/static/chunks/pages/game/%5Bid%5D.js Content-Type: application/javascript; charset=UTF-8
  • /_next/data/development/en-US/game/177.json?id=177 Content-Type: application/json

getStaticProps

https://nextjs.org/docs/api-reference/data-fetching/get-static-props

getStaticProps context locale 参数，默认定义为 locale?: string。大概看了一下源码的定义

https://github.com/vercel/next.js/blob/39302141b5ea3a1e9a55af906129a44675337cf9/packages/next/export/index.ts#L375

locales: i18n?.locales,
locale: i18n?.defaultLocale,
defaultLocale: i18n?.defaultLocale,
domainLocales: i18n?.domains,

猜测应该是这里处理的。因为我们定义了 i18n config，locale 使用了 i18n?.defaultLocale 配置。然后会根据 cookie 或 url 路径处理好当前语言环境。

可能返回 en-US | zh-CN

可以修改类型消除错误 ...(await serverSideTranslations(ctx.locale as string, ['common'])),

webassembly

vercel/next.js#25852

Jest

• Jest #114

Production Branch

切换生产分支

• Production Branch