Next.jsを使ったアプリを作ってOSSリポジトリとして公開したので構成など話す
仕事で Next.js を使うことになったので最初のキャッチアップのために作ったアプリを共有します。
この記事を見てもらえれば、Next.js でアプリ作成を始めるにあたって必要な準備を整えられると思いますので、自分と同じく初心者の方はぜひ最後まで見て行ってください。
🛠 作ったもの
Good First Issue のタグが付けられていて Star を 100 以上獲得している GitHub リポジトリを言語ごとに表示してくれます。
ソート条件には star 数またはフォーク数を指定することが可能です。いずれか多い順に表示してくれます。
ちなみにリポジトリは公開しているので、みなさんの star やコントリビュートをぜひお待ちしています 🎉
このプロジェクト自体にも Good First Issue を用意しており、自分と同じく Next.js や tailwindcss を触り始めた方はぜひ一緒にレベル上げて行ってもらえると嬉しいです 😊
あるいは Next.js や React にお詳しい方、ぜひ改善の issue や pull request をお待ちしています 🙇
🗒 元ネタ
こちらです。技術構成やアプリのデザインは変わってますが基本的にできることは同じです。
特にこちらのツールに不満はなく、自分もコントリビューターとしてコミットさせていただいていたのですが、今回勉強用に自分で Next のアプリを作るにあたっての題材として適切かつどうせなら自分が使うものをということで参考にさせていただきました 🙏
あと、どうも vercel のデプロイがうまくいっておらず自分が対応して使いたかった機能がリリースできない状況のようなので、「だったら自分で作っちゃおう」という考えもありました。
以降からがようやく本題です。
💻 技術構成
- Next.js
- TypeScript
- tailwind CSS
- Jest
- testing library
- Prettier
- ESLint
ホスティング先は vercel です。
以下は簡単に GitHub Actions で設定しているワークフローと、参考にした記事を紹介します。
実際コードや設定をどうしているかは先にリポジトリを載せていますのでそちらからご確認ください。
🧪 テスト
今は Jest と testing library を使ってるだけです。導入の参考にしたのは Next.js のドキュメントです。
最近業務で使って感動した Cypress も導入しようか考えたのですが、ただの 1 ページしかないアプリにそこまでリッチなものはいらないなと思い今回は見送りました。
(見送った理由はもう一つあって、vercel がプルリク時にプレビュー環境を用意してくれるので、いまはそこで確認すればいいレベルだからというのもあります)
🤖 自動フォーマット
フォーマットに使っているのはPrettierです。
導入にあたってはこの記事が参考になりました。
ローカルでprettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'が効くようになったのち、GitHub Actions で自動フォーマットがかかるようにしました。
参考にしたのはこちらの記事です。
これでプルリクエストのタイミングで自動フォーマットをかけてコミットまでしてくれるので、vscode の設定に気を遣う必要がありません。
(一応、Prettier と ESLint の拡張機能をワークスペースの推奨事項として登録しており、設定もgit cloneしてくれば.vscodeにある設定共有によって保存時に自動で Prettier がフォーマットしてくれるようになってます)
👹 Linter
ESLintです。導入にあたっては自動フォーマットと同じ記事が参考になりました。
コマンド自体はcreate-next-appの時点で Next.js がnpm run lintを用意してくれているので、上記の記事を参考に.eslintrc.jsonを設定しただけです。
📮 ホスティング＆デプロイ
先に記載した通り vercel です。Next.js の開発元だけあって超絶簡単にホスティングすることができました。
こちらの記事を参考に設定していったのですが、ハマり要素が 0 でした。
また以下のように vercel は pull request の送信時に preview 環境を提供してくれるのでとても楽ちんです。
vercel でデプロイした後、同じような機能を提供してくれている Firebase hosting でも試してみた…のですが CSR ならすぐできるものが SSR でやろうとするとハマりにハマりました。
無料かつボタン数回押しただけでデプロイできる vercel に対して、Firebase Hosting は Blaze 版じゃないと SSR が使えないうえに権限の設定が必要だったりで初心者に優しくない感じです。結局 3 時間ハマってエラーを解決できなかったので、一旦 Firebase Hosting についてはなかったことにしました(汗)
Firebase を使えば Google のインフラ基盤を使えるという点はいいこと？で vercel より優位な点があるとすればそこかなと思っているのですが、vercel がどこまでできるかはまだ勉強が足りないので現時点ではどちらが優れているかの結論は自分の中では出せないなという感じです。
このあたりは詳しい方の意見をぜひとも聞きたいところ。
🚀 おわりに
みなさんのコントリビュート是非ともお待ちしています！
そして自分と同じく Next.js 初心者の方がアプリを作り始める際の参考になれば嬉しいです。
あと、今回の一件で vercel に一層興味が湧いたので、アンテナに引っかかった情報は積極的に見てみようと思います。
本来の目的である Next.js(React)の基本についてはだいぶ掴めた気がしますので、あとは useEffect や useCallback といった性能向上のテクニックを掘り下げていきたいです。
メンバー募集中！
サーバーサイド Kotlin コミュニティを作りました！
Kotlin ユーザーはぜひご参加ください！！
また関西在住のソフトウェア開発者を中心に、関西エンジニアコミュニティを一緒に盛り上げてくださる方を募集しています。
よろしければ Conpass からメンバー登録よろしくお願いいたします。
Discussion