Next.jsの勉強用にサイト作ってみました。
https://achievements.hachiware.cat
https://github.com/ttt3pu/achievements-next

使用した主な技術スタックは以下のような感じです。

• Next.js
• tailwind
• Prisma
• next-auth
• Vercel

NuxtかNextの違いってだけで当サイトとほぼ同じだったります。
ここ数年はVueばっかり使っていたので久々にReactをガッツリ書きました。
やっぱりどっちが良いとかはなくてどっちにも良さがあるなあと改めて感じました。
JSXきれいに書けて気持ちいいという気持ちもありつつv-ifやv-forが恋しくなる。

GitHubでAuth認証を使ってログインしてデータの追加・更新ができるようになってます。
next-authの使い方が結構癖あってちょっと苦戦しました。ただ設置するだけである程度良い感じにしてくれるのはやっぱり便利ですね。

Prismaは別リポジトリとして置いて、submoduleで読み込むことで当サイトと実績サイトのほうとで1個のDBを使い回せるようにしてます。
もともとPlanetscaleの無料枠を使ってたんですが提供無くなっちゃったのでsupabaseに移行しました。
だいぶ通信速度遅いっぽいので良い感じの乗り換え先探したいかもという感じ・・・ですが無料枠でここまでできるのは結構感動しますね。

当サイトはNetlifyでデプロイしてるのですが、実績サイトのほうはVercelでデプロイしてみました。
Netlifyめちゃくちゃレスポンス遅いなあと思ってたのですが調べてみるとリージョンの問題なんですね。
Vercelは割と近辺にサーバーがあるっぽくて比べると目に見えて早かったです。
設定画面もVercelのほうがリッチな感じ。プレビューモードにちっちゃいメニューみたいの出るの凄い。

これでNext.jsとNuxt.jsそれぞれ練習用のリポジトリ作成できたので、次はRemixあたり試してみたいなーという感じです。