Next.jsでかるーく画面実装する pt.1

初めに

最近になってようやくNext.jsを触り始めたのですが、まだまだ未熟のためメモ書き程度の実装をしていきます。
対応しようとすることは以下です。

• コンポーネントにpropsを渡す
• 簡単な画面遷移
• APIから値を取得してなんか表示する

コンポーネントにpropsを渡すところまでをこの記事で対応します
（長くなると僕自身が見辛いので笑）

SSRとかに関してはこちらを参考にさせていただきました

Client Side Rendering（SPA）・SSR・SSG を整理してみた – 7839https://serip39.hatenablog.com

ビルドする

コマンドを叩いてビルドします。

npx create-next-app 任意のプロジェクト名
yarn dev

環境構築の仕方はこちらを参考にさせていただきました

入門者は基礎からしっかり理解Next.jsの基本(React) | アールエフェクトhttps://reffect.co.jp

こんな感じの画面が出てきますね

コンポーネントを作る

componentsディレクトリを作成して、中にHeader.jsとindex.jsを作成します

Header.jsの中身はtitleというpropsを受け取る前提で記述していきます（まだ何ももらってません）

Header.js

import React from "react";
import styles from "../styles/Home.module.css";

const Header = ({ title }) => {
  return (
    <div className={styles.header}>
      <h1>Hello {title}</h1>
    </div>
  );
};

export default Header;

CSSはよしなに調整。こんな感じにしました

Home.module.css

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid;
}

index.jsでexportしましょう
（コンポーネントが増えた時用にindex.js内でexportします）

index.js

import Header from "./Header";

export { Header };

画面を確認

ここまでで作ったHeader.jsをpages配下のindex.jsで表示してみたいと思います。
Headerコンポーネントのpropsとしてtitleを渡します

index.js

import { Header } from "../components/";

const Home = () => {
  return (
    <div>
      <Header title="Next.js" />
    </div>
  );
};

export default Home;

そしたらこんな感じに表示されました。
渡したpropsも正しく表示されているっぽいですね。

次は簡単な画面遷移を実装していきます
それでは次の記事でお会いしましょう

Next.jsでかるーく画面実装する pt.2

参考

入門者は基礎からしっかり理解Next.jsの基本(React) | アールエフェクトhttps://reffect.co.jp