【Next.js】18歳の僕が自作SNSを作った話。

🔰はじめに

昔からプログラミングが好きで、今までに何回かSNSなどの制作には挑戦していたのですが、18歳になるまでの間に具体的なプロダクトを出すことはできませんでした。この現状に危機感を覚えて何か自分の手で作り上げようと決意し、選んだのがSNSの開発でした。今の原型を作成してから完成までには５ヶ月間かかりました。

✨作ったサイト

リンク↓
https://subnect.com

💁‍♂️筆者について

プログラミングを独学で学んできました。主な経験は以下の通りです：
・Pythonを使用したPyTorchによるデータ分析
・自分のプロフィールサイト制作
・プログラミングを活用した株式分析と取引

❓なぜSNSなの？

SNS開発を選んだ理由は、日本発の大規模SNSが存在しないということからでした。TwitterやInstagram、Facebookなど、世界的に普及しているSNSはどれも海外発のサービスです。もし日本発のSNSがあれば、多くのユーザーに利用してもらえるのではないかと考えました。
また、開発を通じて成長できると考えたからです。ユーザー認証、データベース設計、リアルタイム通信など、幅広い技術を学び、実践する機会になると思いました。日本のユーザーを主なターゲットとしながらも、グローバルな利用も視野に入れて設計しました。

🛠️どんな構成で作ったの？

TypeScriptも触ったことがなかったのですが、やるからには最新構成で作りたいと思いこれらの構成にしました。

ライブラリ

Next.js: Reactベースのフルスタックフレームワークで、SSRやSSGに対応しています。
next-auth: 認証機能の実装を簡素化できます。多様な認証プロバイダーに対応しています。
Prisma: データベース操作を安全かつ効率的に行えます。
Tailwind CSS: 高度にカスタマイズ可能なCSSフレームワークで、迅速なUI開発に役立ちます。
Jotai: Reduxなどと比べて軽量で、使いやすい状態管理ライブラリです。

クラウド

Cloudflare Pages 費用が安く、コードを簡単にデプロイできます。
Cloudflare R2: S3互換のオブジェクトストレージで、こちらも費用が安いです。また、Cloudflare Pagesとの統合が容易です。

🧱製作中の課題

Edge RuntimeでのSharp非対応

Next.jsのEdge Runtimeでは、一般的な画像処理ライブラリであるSharpが使用できませんでした。
代替として@cf-wasm/photonを採用しました。このライブラリはWebAssemblyベースで、Edge環境でも動作します。ただし、パッケージにいくつかのバグがあり、それらを回避するのに苦労しました。

Next-authでreqを取得したい

Next-authでreqを取得する方法がなかなか分かりませんでした。reqはこのように取得するようです。

export const { handlers, auth, signIn, signOut } = NextAuth((req: NextRequest | undefined) => {
});

IPの場所を取得したい

IPの詳しい場所を取得したかったのでIPの情報取得サービスを使おうと思っていました。しかし、Cloudflare Pagesのログを見ているとリクエストのcfに大体の住所が載っていました。
取得はこのように行います。

const country = getRequestContext().cf.country;
const region = getRequestContext().cf.region;
const city = getRequestContext().cf.city;

この方法により、外部サービスに依存せずに、おおよその位置情報を取得できるようになりました。

💎工夫点

OGP

X旧TwitterのOGPでは文字は表示されず、画像のみカード表示されます。それによってリンククリック率が下がってしまうのですが、逆に利用できないか模索した結果、引用リツイートのような画像を投稿ごとに作成して表示することにしました。これで見た目は引用リツイートですがクリックするとサイトに飛ぶようになります。

🔚さいごに

Subnectはまだまだ発展途上のサービスです。改善点やアイデア、バグの報告などがあれば、ぜひSNS内やコメントで教えてください。知人などに宣伝してくれると嬉しいです。
この記事が、同じように自分のプロダクトを作りたいと考えている方々のやる気に繋がればいいなと思います。
最後まで読んでいただきありがとうございました！