🐶
Next.jsで犬画像ジェネレータを作ろう
新しく始めるインターンシップでTypeScriptが必要そうだったので、Type Scriptについて勉強しています。
そこで、このType Scriptのイベントを通して，
- その勉強での気づきとをまとめること
- 自分の学習成果をアウトプットするための成果物を作ること
を目標にまとめます。
Introduction
この記事で分かること
この記事を通して、以下のような内容が分かります。
- Next.jsの新規プロジェクトの作成
- App Routerの使い方
- サーバーコンポーネントとクライアントコンポーネント
- サーバーアクションの使い方
- 外部API連携
- 機密情報となる資格情報(APIキー)の取り扱い
今回は犬画像ジェネレータを作ることにします。
参考にさせていただいたもの/使用させていただいたもの
サバイバルTypeScript: https://typescriptbook.jp/tutorials/vercel-deploy
Dog API: https://dog.ceo/dog-api/
画像のジェネレータにDog APIを、コードの大部分をサバイバルTypeScriptに基づいて作成しました。感謝申し上げます。
犬画像ジェネレータを作ろう
2.1 Next.js
(復習)Node.js:JavaScriptをサーバーサイドで動かすことを目的に開発されたソフトウェア
Next.js:
- Reactをベースに、モダンなWeb開発を行うためのフレームワーク
- Vercel社が開発推進、ホスティングサービスがあるため簡単に公開可能
2.1.1 ページコンポーネント
appディレクトリ配下の構造がページのルーティングに対応
app/about/page.tsxなら/aboutでアクセス可能になる。
完成作品
とりあえず完成しました。時間がないので、くわしいことは今度書きます。
まだ猫のボタンなので、svgを編集してみたいです。
Discussion