個人開発におすすめの Next.js 技術スタック 【2022年9月】

この記事で伝えたいこと

2016年から個人開発を続けてきてRuby on Railsを最初は使っていましたが、ここ数年はNext.jsをメインに使っています。

Next.jsの導入と合わせて、アプリ開発にできるだけ集中できるように、VercelやFirebaseなどを活用する方法を模索しています。

この記事ではここ数年での試行錯誤で辿り着いた「おすすめの技術スタック」を紹介します！

個人開発での制作物

これまでの個人開発での制作物です。

中古品の価格コム的なサービス

2016年から「中古品の価格コム」を目指したサービスを作っています。現在は月間100万PVほどの規模です。
URLは諸事情により、オープンにはしていませんが個別にTwitter DM頂ければ喜んでお伝えします😄

オウンドメディアサービス

2021年頃から「ライターさんを雇うようなオウンドメディア」を効率的に運用するためのプラットフォームを作っています。

このブログや、下記ゲームメディア(月間80万PV)は開発中のプラットフォームをドックフーディングするために作っています。

技術選定方針

ここでの個人開発は、収益化前の0->1のサービス開発を想定しています。

0->1のサービス開発では、QCDの中の「デリバリー(D)」、つまりユーザーにできるだけ使ってもらい、価値を感じてもらえるかの検証が大切です。

また個人開発特有の制約として、開発にかけられる「コスト(C)」が個人で出費できる範囲内に制限されます。

それを踏まえて、ここ1-2年で特に大切にしているのは次の内容です。

フレームワーク＆サーバ

Next.js + Vercelがオススメ

タイトル等に書いているとおり、フレームワークはNext.js、サーバーはVercelがオススメです。

Next.jsはReact.jsのフレームワークで、VercelはNext.jsを作っている会社の名前であり、ホスティングサービスの名前です。

VercelはNext.jsのフレームワークの機能を最大限活かせるように作られており、効率的にフロントエンドを運用するための仕組みが整っています。

Next.js + Vercelの強み

Next.js + Vercelの最大の強みは、フロントエンドに最適なホスティングの仕組みが整備されていることです。

フロントエンドの最適な形の一つは、あらかじめ生成されたファイルをCDNからユーザーに配信することです。

この仕組みには、課題があります。
事前にファイル生成をしてホスティングした場合、更新されたデータをホスティングに更新結果をアップロードする仕組みを検討する必要があります。

どのファイルがどのデータを更新したときにアップロードし直すかを自前で整備するのは、かなり工数がかかりそうな印象です。

Next.js + Vercelはこの課題を解決する仕組みをフレームワークとホスティングサービスで提供しています。

具体的には、Next.jsのSSG(Static Site Generation、静的サイト生成)とISR(Incremental Static Regeneration)です。

データベース

これまでの試行錯誤の結果、データベースはそのデータ特性に応じて、いくつかのプラットフォームを使い分ける形が、コスパ的に一番良いと思っています。

管理者が入力するデータ

管理者が入力するデータは、NewtのようなHeadlessCMSや、Airtableのような仕組みを使うことで、データ入力を効率化できます。

RMSDB

リレーションが伴うようなデータは、PlanetScaleやSupabase、Digital OceanのManged Databaseがオススメです。

合わせて、これらのRMSDBを使う場合はORマッパーのPrisma.jsが便利です。

NoSQL

複雑な検索や、集計作業が必要のないデータはFirebas FireStoreのようなNoSQLが、ライブラリ込みで開発しやすいのでオススメです。

UI & CSS フレームワーク

独特なUIが出ない限りは、Chakra UIがサイト開発では一番オススメです。

独自なUIをしっかり構築していきたい場合は、Tailwind CSSがオススメです。

Tailwind CSSを使いつつ、コンポーネントで省力化したい場合は有料ですがTailwind UIを検討してみても良いかもです。

Next.js でオススメの実装方針

オススメライブラリ

NextAuth.js

Next.js向けの認証ライブラリです。各種SNS認証をサポートしており、多機能で使いやすいです。

Tanstack Query

クライアントサイドでのデータフェッチは、Tanstack Queryがオススメです。
(React Queryの名前で有名なライブラリのv4が名前が変わったらしいです)

Vercel謹製のSWRと比較されることが多いですが、個人的にはデータ通信の細かいデータ制御を考えると、こちらの方がオススメです。

ただ、ライブラリのサイズが気になる場合はSWRの方が良いかもです。

React Hook Form + zod

React Hook FormはReact.jsで入力フォームを作るときに便利なライブラリです。

zodはTypeScriptフレンドリーな、バリデーションライブラリでこちらも便利です！

next-head-seo

zennの開発者であるcatnoseさんが作られたNext.jsのSEOタグを設定するためのライブラリです。

vercel/og-image

Next.jsのライブラリではなく、Next.jsで作られた画像を動的に生成できるOSSです。
あらかじめVercelなどにデプロイしておけば、コードに従って動的に必要な画像を生成してくれるので、OGP画像などに活用できます。HTMLやCSSで作れるので便利です。

宣伝：福岡市、美味しいもの多いよ

最後に宣伝で、福岡市は安くて美味しいお店多いので、もし福岡市に遊びに来られた際はぜひTwitter DMで声をかけてください。安くて美味しいお店にご案内します🤣