初めに
前回の記事からの続きです。
対応する内容は以下です。
- コンポーネントにpropsを渡す
- 簡単な画面遷移
- APIから値を取得してなんか表示する
簡単な画面実装をこの記事で対応します
（1記事に全て書くと自分自身が見辛いのです笑）
画面実装
こちらで実装した画面を使い回します
必要なファイルの作成
pages配下にAbout.jsを作成します（pages下のindex.jsからここに画面遷移させる予定です）
簡素なもので大丈夫です
About.js
import styles from "../styles/Home.module.css";
const About = () => {
return <p className={styles.link}>AboutのPage</p>;
};
export default About;
CSSはご自由に調整してください
Home.module.css
.header {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid;
}
.link {
display: block;
text-align: center;
color: red;
margin: 50px;
font-size: 50px;
}
静的に画面遷移させる
最初の画面から、Aboutのページに遷移させる処理を記述します！
index.js
// Linkをimport
import Link from "next/link";
import { Header } from "../components/";
import styles from "../styles/Home.module.css";
const Home = () => {
return (
<div>
<Header title="Next.js" />
{/* Linkのhrefを指定するだけでOK */}
<Link href="/About">
<a className={styles.link}>Aboutのページに遷移</a>
</Link>
</div>
);
};
export default Home;
Linkコンポーネントをimportし、その中にhrefの形で遷移先を記述するだけでOKです。
React単体だとライブラリを入れたり独自の法則に従って記述が必要ですがこれなら画面遷移が楽ですね！
動的に画面遷移させる
先ほどは静的に画面に遷移させる方法を書きました。
次はダイナミックルーティングという手法を使って動的に遷移先を切り替えます
pages配下にusersというディレクトリを作成し、その中に[name].jsを作成しましょう
[name].jsの中身は以下のようにします
userRouterの意味や使い方はこちらを参照ください。（丸投げで申し訳ないです）
[name].js
import { useRouter } from "next/router";
import styles from "../../styles/Home.module.css";
const Name = () => {
const router = useRouter();
return (
<div>
<h1 className={styles.link}>{router.query.name}のPageです</h1>
</div>
);
};
export default Name;
index.jsで適当な配列を作成し、そこから[name].jsに遷移させ、
かつ動的にページの内容を変化させます
index.js
import Link from "next/link";
import { Header } from "../components/";
import styles from "../styles/Home.module.css";
const Home = () => {
// 適当な配列を作成
const users = [
{ id: 1, name: "tanaka" },
{ id: 2, name: "yamada" },
{ id: 3, name: "watanabe" },
];
return (
<div>
<Header title="Next.js" />
<Link href="/About">
<a className={styles.link}>Aboutのページに遷移</a>
</Link>
{/* 配列の中身をmapし、urlに含まれる文字列を動的に変更 */}
{users.map((user) => {
return (
<li className={styles.link} key={user.id}>
<Link as={`/users/${user.name}`} href="/users/[name]">
<a>{user.name}</a>
</Link>
</li>
);
})}
</div>
);
};
export default Home;
そしたらこんな画面になりました
Aboutに画面遷移してみます
http://localhost:3000/About
というurlになっているはずです
次にtanaka（[name].js）に遷移してみます
http://localhost:3000/users/tanaka
というurlに遷移できましたでしょうか？
こんな感じでNext.jsを使うとページの動的な変更を簡単に実装できます😛
駆け足になりましたが次はAPIを取得して何かを表示するところをやってみます！