はじめまして。Next.jsに初めて挑戦、誰でも爆速でブログが書けるプラットフォーム「Yuip Coders」をベータリリースしました。
Yuip Coders >_ - すごい速いブログアプリ （https://yuipcoders.com/）
トップページを開くと猫さんがお出迎えしてくれます。
何ができる？
記事投稿
- 誰でも記事の投稿ができます。
- 5秒で投稿できます。（ガチ）
- ベータリリース中は会員登録無しで即投稿できます。
コメント投稿
- それぞれの記事にコメントができます
- コメントではMarkdownが使えます
- スレッド形式のコメントを採用（Redditみたいなコメント）
検索
- 記事の検索ができます
- 正規表現検索ができます
- APIを直接編集して検索できます （例：
/api/posts/?ordering=-created_at&page=1&page_size=3&search=python&search_fields=content&search_fields=title）
プロフィール編集
- 自己紹介文やアイコンの設定ができます
- Twitterアカウントの設定ができます
- 会員登録、ログインができます
使った技術・言語
インフラ
- 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ぜひお伝え下さい。
ありがとうございました。
（参考）