🛍️

Next.js Commerceのソースコードを読みながら調べたことをメモする

公開日
8か月前
2023-10-20
更新日
8か月前
2023-10-21
更新履歴
preview

Next.js Commerce のソースコード

GitHub - vercel/commerce: Next.js Commerce
Next.js Commerce. Contribute to vercel/commerce development by creating an account on GitHub.
github.com favicon
github.com
GitHub - vercel/commerce: Next.js Commerce

上記のコードを読みながらNext.jsのApp Routerでのお作法などを学んでいく。

デモサイト: https://demo.vercel.store/

Edge Runtime

export const runtime = 'edge'

page.tsx などで大体このように書かれている。edge だと高速になるらしい。

このサイトで試したらビルドエラーになってしまった。Edge Runtimeは高速にするために、色々と制限があるらしい。

参考: Rendering: Edge and Node.js Runtimes | Next.js

metadata

Metadataの細かいところを見ていく。

参考: Optimizing: Metadata | Next.js

metadataのtitle

title: {
  default: SITE_NAME!,
  template: `%s | ${SITE_NAME}`
}

titletemplate を指定することで、「about | SITE_NAME」のようなtitleにできる。

metadataのrobots

robots: {
  follow: true,
  index: true
},

metaタグのrobotsを設定できる。例)<meta name="robots" content="index, follow"/>

参考: meta robotsとは?robots.txtの役割と使い方

sitemap.xml

app/sitemap.ts を作成することで https://example.com/sitemap.xml が出力される。

参考:

robots.txt

sitemap.xmlと同じく app/robots.ts を作成することで https://example.com/robots.txt が出力される。

参考:

package.jsonを見てみる