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
上記のコードを読みながら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}`
}title の template を指定することで、「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を見てみる
- @headlessui/react
Headless UI - Unstyled, fully accessible UI components - @heroicons/react
Heroicons - clsx
lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally.
クラス名の加工を行うユーティリティ。 - eslint-plugin-unicorn
sindresorhus/eslint-plugin-unicorn: More than 100 powerful ESLint rules
ESLintのルールがいっぱいセットになっている。 - lint-staged
lint-staged/lint-staged: 🚫💩 — Run linters on git staged files
コミット前にLintするためのパッケージ。 - @vercel/git-hooks
vercel/git-hooks: No nonsense Git hook management
Gitのhookの管理を簡単にする。
