Next.jsで爆速ブログSaaSプラットフォームを作りました。（個人開発）


はじめまして。Next.jsに初めて挑戦、誰でも爆速でブログが書けるプラットフォーム「Yuip Coders」をベータリリースしました。

[Yuip Coders >_ - すごい速いブログアプリ](https://yuipcoders.com/?qt) （[https://yuipcoders.com/](https://yuipcoders.com/?qt2)）

トップページを開くと猫さんがお出迎えしてくれます。

![ShareX-220830T110132-ucH0PM4O~chrome-Yuip_Coders___-_すごい速いブログアプリ_-_Google_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818973/e1710a53-efb5-186f-77f6-f286001d20e4.png)

## 何ができる？

### 記事投稿

- 誰でも記事の投稿ができます。
- 5秒で投稿できます。（ガチ）
- ベータリリース中は会員登録無しで即投稿できます。

![ShareX-220830T114104-UiiddeN9~chrome-Yuip_Coders_-_Google_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818973/49a622bf-f316-0066-ebed-81c804aa1c2d.png)


### コメント投稿

- それぞれの記事にコメントができます
- コメントではMarkdownが使えます
- スレッド形式のコメントを採用（Redditみたいなコメント）

![ShareX-220830T113647-pD7y1imT~chrome-node-notifierを使いnode.jsでデスクトップ通知を行うには_-_Google_Chr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818973/ddee6317-0dc6-c6d2-c0ab-60faa4791332.png)


### 検索

- 記事の検索ができます
- 正規表現検索ができます
- APIを直接編集して検索できます （例： `/api/posts/?ordering=-created_at&page=1&page_size=3&search=python&search_fields=content&search_fields=title`）

![ShareX-220830T113858-nEMw6KaE~chrome-Yuip_Coders_-_Google_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818973/c2d26cc8-d120-b94d-80e2-a02e9fd1ad01.png)


### プロフィール編集

- 自己紹介文やアイコンの設定ができます
- Twitterアカウントの設定ができます
- 会員登録、ログインができます

![ShareX-220830T113944-06HGHIMk~chrome-Yuip_Coders_-_Google_Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818973/77589037-8ce5-f273-63d0-fac97377b9ae.png)


## 使った技術・言語

### インフラ

- Ubuntu 20.04
- Nginx

### プログラミング言語

- Python
- JavaScript
- Node.js
- Shell

### フレームワーク

- Next.js
- React.js
- Django
- Django rest framework

### 開発環境

- VSCode

## どうして作ったか

文章を書くのが「好き」、というのがまず最初のモチベーションです。

次に、「速度と効率」です。
僕はこれまでWordPressをブログに使っていましたが、PHPでプラグインを書いたり、デバッグでWordPressの内部コードやテーマのコードを読んでいるうち、その冗長性、無駄に複雑なコードの多さと、その弊害を体感してきました。これらのコードが記事の編集時にじゃまをしたり、ページ読み込み時の遅延を生み出したりしていました。

最後に、ささやかな「夢」です。
僕が最初のブログを立てて書き始めたのが7年ほど前で、アメブロかなんかを使っていたのですが、その頃から、MediumやTumblr、アメブロやはてなブログのようなブログプラットフォームを、自分で持ちたい、と構想を持っていました。
紆余曲折あり年月かかってしまいましたが、一つ、自分の目標が達成できたのではと感じています。

## 経緯

Next.jsでアプリを作るのは初めてでしたが、実はこのアプリははじめからNext.jsで作ろうとしていたわけではありません。

### Django HTML

まずDjangoにはテンプレートエンジンのJinjaで、HTMLにPythonを埋め込んで、PHPみたいな感じで、レンダリングする…というのがデフォルトなやり方です。
当初はこのやり方をしていて、アプリのリリースもその調子で続けていくつもりでした。これが今年の初め頃、6ヶ月前くらいです。

### React.js

ただ開発を続けている間にReact.jsを初めて触り、並行でアプリをいくつか作りました。そうすると、Django HTMLでHTMLを書き続けていくのは効率がよくない、と気づき、
Django側で実装していたフロントエンドを、全面的にReact.jsに落とし込んで、サーバーサイドとフロントエンドを切り分ける、SPA（シングルページアプリケーション）形式を取ることにしました。

この時点で、もともと実装していたDjango側のviewとかurlsとかのサーバーサイドの処理は、ほとんど無駄になってしまい、また、SPAに対応させるのに必要な堅実なAPIの実装として、Django rest frameworkというAPIフレームワークの導入を行い、既存のデータベースモデルに対して一つ一つ処理を行っていきました。（めっちゃ時間かかりました）

また、webpackやtypescriptなど関連技術の知識も強化していきました。特にwebpackとかreactのfast refresh周りはかなり面倒事が多かったと思います。これが3ヶ月ほど前。

### SSR

さてアプリも9割完成した、デプロイして公開しよう…とプロダクション周りの実装を検証していると、bundle.jsのサイズ容量、という問題にぶち当たりました。
いわゆる、SPA特有の、ページ速度の問題・APIのスロットリングやキャッシュ・webpackのbundle.jsの分割・split chunks・遅延ロード etcといった諸問題です。

これらの問題に数週間一つずつ対処し、問題が出ては対処、対処しては新たな問題の表出、といたちごっこをしていくうちに、消耗してしまいました。

はて、どうしようかと頭を抱えていると、ふと前読んだSSR・サーバサイドレンダリングという単語が頭をよぎり、ダメで元々Next.jsにトライしてみることにしました。これがつい2週間ほど前です。

### Next.js

Next.jsは一言で言って、「最高」でした。SPAで抱えていた問題が全部吹き飛んだし、Reduxに依存しなくてもアプリが動く。
Next.jsの柔軟性と速度はまさにmind blowing、開いた口が塞がらない状態でした。

Next.jsでの開発では大きな問題にぶち当たることもなく、スムーズにSPAからの移行、リファクタリングができました。そうして今に至ります。

## 感想

やはり、ウェブはやることが多いと再確認しました。日をまたぐたびに自分の知識の浅さを実感させられました。
しかし、Next.js・React・Django DRFで一つアプリを作ってみて、学んだことは多く、エラーに数日潰されることもあれど、楽しい開発ができたと思います。
しかし、今月8月のうちに、とりあえずの公開までできたのも、Next.jsの貢献は大きいと感じています。
各ライブラリ、Stack overflow、Qiita、Reddit、間接的にお世話になった全ての開発者に、ありがとう。

---

PS. アプリについてのご意見・ご感想・バグ報告・機能要望etcぜひお伝え下さい。
ありがとうございました。

（参考）

- [[初心者向け]Reactの基礎を徹底解説してみた #React - Qiita](https://qiita.com/renesisu727/items/98b308ee72281b6f8066)
- [出来る限り短く説明するReactJS入門 #React - Qiita](https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19)
- [React始めました。(基本構文編) #JavaScript - Qiita](https://qiita.com/watataku8911/items/d632e2274c6921f1e109)
- [Next.jsに入門した #JavaScript - Qiita](https://qiita.com/studio_haneya/items/738dda2a8f08ad7d82b1)
- [Pythonさえ分かればDjangoでWebアプリは作れる #Python - Qiita](https://qiita.com/pythonista/items/19613663ef7bb3c57d4f)
- [Django(Python)でシステム開発できるようになる記事_入門編 #Python - Qiita](https://qiita.com/Saku731/items/ed64190a12a4498b9446)
- [Django REST Frameworkを使って爆速でAPIを実装する #Python - Qiita](https://qiita.com/kimihiro_n/items/86e0a9e619720e57ecd8)