はじめに
初めてQiitaの記事を書かせていただきます。
内容はタイトルの通りで、今後色々と作ってリリースをしていきたいので、それを見据えて作りました。
これまでメイン/アルバイトでVue.jsを使っていたのですが、以前から使いたいと思っていたNext.js(React)を使ってみた次第です。
GitHubのレポジトリ↓
デプロイ↓
使用した技術
使っている技術も少ないですし、機能やデザインも改善の余地はあるのですが、とりあえずデプロを目標に開発を進めました。
- Next.js
- TypeScript
- Notion: 記事管理
- notion-page-to-html
- Vercel: デプロイ
- Google Analytics: 今後の勉強用に導入
- SCSS
- (NextUI: レスポンシブ用のGridを使ってたのですが、結局は直書きがベストかなと)
実装につて
Next.jsが凄すぎた
これまで個人としてVue.js＆Goでのアプリケーション開発を勉強していたのですが、実際にデプロイするため環境を整えるというのがどうしても今の自分では出来ない部分というところでありました。
そんな中、目にしたのがNext.jsのAPI Routesです。
「嘘でしょ、フロントとバック一緒に上げれるの？」
無知とは怖いなと思うところです。
これを知ってからは、色々作りたい欲がバンバン出てきています！
Notionとの連携
今回一番悩んだのが、Notionとの連携でした。
初めはNotionAPIを使って記事を取得しようとして実装を進めたのですが、Notionのブロックというものに苦戦を強いられ挫折しました。
コードにはその時の亡骸が残ってます(´；ω；｀)
挫折理由としては次の２つになります。
- ブロックの中にブロックがある再帰構造となっている
- 主に、箇条書きのリスト部分が一括で取れない
- 記事取得に時間がかかり過ぎる
ということで、"notion-page-to-html"というライブラリを使って実装という形になってしまいました。
これには、記事を取得するにはNotion側で公開に設定しなければならないという手間の問題があります。
何か方法があればNotionAPIに切り替えたいところではありますが、一旦はという形です。
デザイン
センスは当然皆無でございます。(何か違うんだよな感)
とりあえず、ライト/ダークモードの切り替えに対応させています。
私が基本ダークモードしか使ってないので、ライトモードで変な色のところがあったりするかもしれません。
今後
今後追加したい機能としては
-
ファビコンを新しく作ったでそれに変更(完了: 2022/11/24) -
記事ごとの静的ページを作成（完了: 2022/12/31） - Google Analyticsのイベントを追加
かなと思ってます。
おわりに
以前、Firebaseでちょっとしたものをデプロイしたのですが、その時の反省点も踏まえて実装ができたので満足…かなと思っています!