普段はVue.js、NuxtJSを使って個人開発をしています。エンジニアのK(@k_urtica)といいます。
今回、Next.jsを初めて学んでみたので、Next.jsでWebサービスを作ってみました（入門した理由は後述）
ちなみに私のReactの知識はGatsbyでブログを作っているぐらいのものです。といっても、Reactの機能をバリバリ使って構築しているようなものではないので、ゼロに近い知識です（Next.jsにいたっては完全にゼロ）
入門するにあたってひとまずざっと以下の事をやりました。
- Next.jsのドキュメントを一通り読む
- Next.jsの公式チュートリアルを実施
- Reactのドキュメントを一通り読む
- Qiita/Zenn等でReactのhooks、パフォーマンス周りの記事を読む
作ったもの
Superb Shotという、スクリーンショット（または単に何かしらの画像）を、目を引くような良い感じのスクリーンショットへ加工することができるWebサービスです。
具体的には、スクリーンショット画像に様々な魅力的なグラデーション背景やパディング、シャドウを付けたり、インスタグラム風味のフィルター加工を簡単に施すことができます。
加工した画像はクリップボードにコピーするか、画像ファイルとしてダウンロードすることができます。
本サービスの想定される使われ方
⇒ SNSで画像をシェアする前に目に留まる画像へ加工する、などなど。
加工した画像①（背景/パディング/角丸/シャドウ/フィルター付与）
加工した画像②（背景/パディング/シャドウ/フィルター付与）
加工した画像③（背景/パディング/角丸/シャドウ）
Superb Shotの使い方
Superb Shotの使い方をご紹介します。比較的シンプルな機能でかつ、直感的に操作できるようなインタフェースにしたので、実際に見ていただいた方が早いかもしれません。
（登録不要でブラウザ上で処理が完結するため、簡単そしてセキュアに使えます）
深い理由は無いですが、今回は英語サイトとして作成しています。
気が向いたらi18nで日本語やその他翻訳を追加する予定です。
画像を選択する
トップページのヒーローヘッダーで加工したい画像を選択できます。以下の3つの方法があります。
- ドラッグ&ドロップゾーンへ画像をドロップする
- Brouse fileから画像ファイルを選択する
- Paste fileからクリップボードの画像を使用する
または、3つのデモ画像を使用することもできます（ちなみにデモの1枚目、2枚目は私が撮影したものです）
画像を編集する
トップページで画像を選択すると編集ページへ遷移します。
編集ページ右側のサイドバーに一通りの設定があり、何かしらの設定値を変えるとリアルタイムでプレビュー画像へ反映されます。
↓多様で魅力的なバックグランドカラー
↓パディング、角丸(border-radius)、シャドウ
↓インスタ風味の画像フィルター
画像を保存する
編集ページのサイドバー下部にあるCOPY、DOWNLOADボタンからそれぞれクリップボードへコピー、画像ファイルとしてダウンロードできます。
現状ダウンロードできる画像形式はpngのみですが、そのうちjpegをサポートするかもしれません。
既知のバグ
腹立たしいことにSafariで一部レイアウトがおかしくなる箇所があることを確認しています。気が向いたら修正します。Chromeを使ってね。
技術的なこと
Superb Shotで使用している主な技術について。
記事タイトルおよび冒頭にも書いていますが、Next.jsで構築し静的サイトとしてVercelにデプロイしています。
フロントエンドオンリーのお手軽構成となっています。
StoreはRecoilを使用（Reduxは本サービスにおいては明らかに過剰な代物だったので却下）
UIはCSSフレームワークとしてTailwindCSSとdaisyUIを使っています。daisyUIはデザインが好きだったのでいつか使ってみたかったと思い入れてみました。
自分でゼロからコンポーネントを実装したり、何かしらのUIフレームワークと組み合わせるまでもない時にdaisyUIはすぐに使えて便利です。
instagram.cssはインスタ風味のCSSフィルターです。一部のフィルターは少し調整して使っています。
CSSフィルターでこんなに色々できるってことを初めて知りました。
気に入ってるところ
全然メインの機能ではないのですが、、画像選択ボックスのグラデーショナルなアニメーションボーダーが個人的に気に入ってるポイントです。
これはたまたま見つけた↓の動画からインスピレーションを得ました！
↓ソースコード
勘違いしていたこと
当初Next.jsのSSG≒NuxtJSのSSGと思っていましたが完全に勘違いしていました。
NuxtJSのSSGはS3やGitHubPages、Netlify等々、静的サイトとしてどこにでもデプロイできますが、Next.jsのそれは基本的にはVercelが必要みたいですね。。
Next.jsで完全に静的サイトとするにはStatic HTML Exportを利用する必要がありますが、色々と機能に制限があるので使っていません。
※途中まで作って、もしかしてGatsbyを使った方が適当だったかなぁと結構悩みましたがNext.jsで作り切りました。
かかった時間
毎日手を動かしていたわけではないですが、期間としてはReact/Next.jsの学習時間含めて1～2週間ほどです。
私はよく頭の中でデザインを考えながら実装するというやり方をとるのでデザインで悩み、実装も手戻りしながらなので（無駄に）時間がかかりました。。
運営費、そしてマネタイズ
バックエンドもない普通の静的サイトなので現状サイトの運営費はドメイン代以外かかっていません。
また、マネタイズはしていません。やるとしたら今後需要がありPVが安定した数値になったら広告を貼るかもしれないです。
日々運営費が掛かっていたらマネタイズを真剣に考える必要がありますが、掛かっていなければ何も考えず公開し続けても問題は無いのです。個人開発においてはいかに低コスト（完全無料にこだわるぐらいでも良い）で運営できるかを最優先に考えます。
なぜReact/Next.jsに入門したか
Nuxt3の開発状況を見て、です。
私は普段Nuxtをよく使いますが、Nuxtのv3リリースが遅れており2022年9月時点でv3の安定版がリリースされていません。RCが順次リリースされていますがまだまだ大きなバグや変更点が多く私自身の中ではまだ使えないと判断しています。
また、Nuxt3がリリースされたとしてもよく使う関連ライブラリ（特にi18nやPWA、sitemap、Vuetify等々）の対応も待つ必要があり中々厳しいものがありました。
今更Nuxt2で新規プロジェクトを作る気にはなれず、それならばとReact/Next.jsに入門した次第です。
あとは、少し前までは日本ではReactよりVueのが流行っていた感がありましたが、今はReactが圧倒的に使われている状況も理由のひとつです。
おわりに (&宣伝)
初めてReact/NextでWebサービスを作ってみましたが、React良いなぁと思いました。
パフォーマンス周りはVueよりも注意して実装する必要がある感じがしましたが、ライブラリが豊富、環境構築周りで悩むこと無し、情報量多い、需要が高い等々今後もReact/Next.jsで開発していこうかなぁと思っています（少なくともNuxt3が安定するまでは）
Superb Shot使ってみてね😉
（宣伝）Web ToolBoxというブラウザ上で使える、様々な便利なツール集を公開しているWebサービスを開発しています。こちらもよろしくお願いします！