new article body
今回技術ブログを作成するにあたって。初めてNext.jsを使ってみました。
使用技術
"dependencies": {
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.2.0",
"biome": "^0.3.3",
"firebase": "^11.4.0",
"jest": "^29.7.0",
"next": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@tailwindcss/postcss": "^4.0.10",
"@testing-library/jest-dom": "^6.6.3",
"@types/bun": "latest",
"@types/node": "20.8.10",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"daisyui": "^5.0.0",
"jest-environment-jsdom": "^29.7.0",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.10",
"ts-node": "^10.9.2",
"typescript": "^5.2.2"
},
機能
QiitaとmicroCMSのAPIを使って記事を取得し、記事カードとして表示する機能を実装しました。
クリックすると、Qiitaは元記事のページ、microCMSは専用のビューページに遷移するようにしています。
つまずいた点
普段使用していたuseStateなどがSSRだと使用できず、対象のコンポーネントがCSRかSSRかによってReactの書き方を変えないといけなかったところに躓きました。
また、APIとJsonデータを扱うことがあまりなかったので、API通信時の非同期の処理とシリアライズをすべきタイミングがよくわからず、どこで問題が起きているのか切り分けることに苦戦しました。
学んだこと
CSRやSSRなどがどういうものかは知っていましたが、実際にプログラミングをする際、何が使えて何が使えないかを学ぶことができました。
また「APIを使用してデータの送受信を行う」ということを、今までなんとなくでやっていましたが、Next.jsでAPIというものを意識的に扱ったおかげで、かなり解像度を深めることができました。
まとめ
今回はNext.jsを使って技術ブログを作成しAPIという仕組みの理解を深めることができました。
そのため、APIを肌感覚で学びたい場合は、フォルダ単位でAPIとUIが分かれているフレームワークを使用して何か作ってみるのことが、大分APIの理解に役立つと思います。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします👇