ReactWEB

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

React
この記事は約3分で読めます。

初めに

最近になってようやく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