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

## Next.js Commerce のソースコード

::link-card[https://github.com/vercel/commerce]

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

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

## Edge Runtime

```typescript
export const runtime = 'edge'
```

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

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

参考: [Rendering: Edge and Node.js Runtimes | Next.js](https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes)

## metadata

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

参考: [Optimizing: Metadata | Next.js](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)

### metadataのtitle

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

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

### metadataのrobots

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

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

参考: [meta robotsとは？robots.txtの役割と使い方](https://www.seohacks.net/blog/3482/)

## sitemap.xml

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

参考:

- [Metadata Files: sitemap.xml | Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap)
- [commerce/app/sitemap.ts at main · vercel/commerce](https://github.com/vercel/commerce/blob/main/app/sitemap.ts)

## robots.txt

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

参考:

- [Metadata Files: robots.txt | Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots)
- [commerce/app/robots.ts at main · vercel/commerce](https://github.com/vercel/commerce/blob/main/app/robots.ts)

## package.jsonを見てみる

- @headlessui/react  
  [Headless UI - Unstyled, fully accessible UI components](https://headlessui.com/)
- @heroicons/react  
  [Heroicons](https://heroicons.com/)
- clsx  
  [lukeed/clsx: A tiny (228B) utility for constructing \`className\` strings conditionally.](https://github.com/lukeed/clsx)  
  クラス名の加工を行うユーティリティ。
- eslint-plugin-unicorn  
  [sindresorhus/eslint-plugin-unicorn: More than 100 powerful ESLint rules](https://github.com/sindresorhus/eslint-plugin-unicorn)  
  ESLintのルールがいっぱいセットになっている。
- lint-staged  
  [lint-staged/lint-staged: 🚫💩 — Run linters on git staged files](https://github.com/lint-staged/lint-staged)  
  コミット前にLintするためのパッケージ。
- @vercel/git-hooks  
  [vercel/git-hooks: No nonsense Git hook management](https://github.com/vercel/git-hooks)  
  Gitのhookの管理を簡単にする。