初めに
前回の記事からの続きです。
対応する内容は以下です。
- コンポーネントにpropsを渡す
- 簡単な画面遷移
- APIから値を取得してなんか表示する
最後にAPIから値を取得してなんか表示してみます
画面実装
過去に実装した画面を使い回し・・・。
外部からデータを取得する
今回使用させていただくAPIは、アクセスするだけで犬の画像urlがランダムで返ってくるというAPIです
https://dog.ceo/api/breeds/image/random
サーバー側からデータを取得する方法に関しましてはいくつかあるようですが、
今回はgetServerSidePropsという方法を使います。
詳しくはこちらを参照ください。
入門者は基礎からしっかり理解Next.jsの基本(React) | アールエフェクトhttps://reffect.co.jp
前回の画面で実装した[name].jsの中にgetServerSidePropsを追加して記述します[name].js
import { useRouter } from "next/router";
import styles from "../../styles/Home.module.css";
const Name = ({ img }) => {
console.log(img);
// {message: "https://images.dog.ceo/breeds/malinois/n02105162_5983.jpg", status: "success"}
const router = useRouter();
return (
<div>
<h1 className={styles.link}>{router.query.name}のPageです</h1>
{/* 取得したurlを絶対パスとして指定 */}
<Image src={img.message} alt="Picture of dog" width={400} height={400} />
</div>
);
};
export default Name;
// getServerSidePropsの中でfetchを利用してデータの取得を行う。
export async function getServerSideProps() {
const res = await fetch(`https://dog.ceo/api/breeds/image/random`);
const img = await res.json();
return { props: { img } };
}
そしたらなんか怒られました。
next.config.js に使用する外部ドメインを設定してくれって言ってるみたいです
というわけでnext.config.jsを直します
module.exports = {
reactStrictMode: true,
images: {
domains: ["images.dog.ceo"],
},
};画面遷移して確認
http://localhost:3000/
からtanakaに画面遷移して画像が表示されるか確認します。
正常にデータを取得できていればこのように画像が表示されるはずです！
最後に
細かい説明をところどころで端折っているのが申し訳ないですがNext.jsで簡単な実装をしてみました。
今後また上手なやり方など見つけた際は新たに投稿したいと思います！
参考
入門者は基礎からしっかり理解Next.jsの基本(React) | アールエフェクトhttps://reffect.co.jp
【Next.js入門⑤】propsで他のCompoentに値を受け渡す（レイアウト作成） – Laravelとねころっけくん5.8https://nekorokkekun.hatenablog.com