next.js with cludflare pages

bibitto

初手
create cloudflare@latest -- my-next-app --framework=next

これでnext.jsの最新バージョンでアプリを作成し、cloudflare pagesのプロジェクトも作れる（なんならoptionalでdeployまで可能）

bibitto

npmは嫌いなのでbunを使用する

package-lockを削除
bunfig.tomlを追加
gitignoreにbun.lockbを追加
bun iを実行

bibitto

biomeを使用する

bun add --dev --exact @biomejs/biomeを実行
bunx biome initでbiome.jsonを作成＆biome.jsonを自分の好きなようにアレンジする
rootに.vscode/settings.jsonを作成し、保存時に自動で修正してくれるように設定する

bibitto

最初から多言語対応してみる。next-intlを採用

bibitto

shadcn-uiを使用する

components.jsonのaliasesを以下のように修正

  "aliases": {
    "components": "@/app/[locale]/components",
    "utils": "@/libs/shadcn/utils",
    "ui": "@/app/[locale]/components/ui",
    "lib": "@/libs/shadcn",
    "hooks": "@/hooks"
  }

bibitto

ここまでで一旦setup完了

このスクラップは2024/10/14にクローズされました