Next.js 基礎 備忘録

Posted on Updated on

ドットインストールで学習して重要だと思った部分をまとめていきます。

Appフォルダのpage.tsxがまず最初に表示される。

appフォルダ内のpage.tsx, layout.tsx, globals.cssで不要なファイルを削除してから開発スタート。

ルーティング：urlに応じて適切なページを表示させる仕組み。

ダイナミックルーティング：urlを/users/[userId]/page.tsxのようにし、受け取った値でページを出しわけする仕組み。

// propsを使用し値を受け取る
// オブジェクトの型付けはtypeではなくinterfaceを使う。typeは単独の値を受け取るときに使う。
interface Props {
  params: {userId: string}; // paramsは決まった言い方。userIdはフォルダ名。stringは決まった型。
}

リンクの設定はLinkコンポーネントを使う。next/linkをクリックすれば自動でコンポーネントが読み込まれる。

<Link href='/users/1' className='text-blue-500 hover-text-blue-700'>
  User 1
</Link>;

データはappフォルダの中に別のフォルダ（ここではlibraryを意味するlib）を作成し、その中にファイルを作成する。

interface User {
  id: number;
  name: string;
  prof: string;
}

export const Users: User[] = [
  { id: 0, name: 'Taro', prof: 'Frontend Engineer' },
];

page.tsxで読み込んで、map()で展開する。

import { users } from './lib/users';

export default function Home() {
  const userItems = users.map((user) => {
    return (
      <li key={user.id}>
        <Link
          href={`/users/${user.id}`}
          className='text-blue-500 hover:text-blue-700'
        >
          {user.name}
        </Link>
      </li>
    );
  });
  return (
    <>
      <h1 className='text-lg border-b pb-1 mb-1'>Users</h1>
      <ul className='list-disc ml-4'>{userItems}</ul>
    </>
  );
}

個別ページは一覧ページからidを受け取り、そのidと合うオブジェクトのデータをlibから取得し表示する。

const user = users[Number(props.params.userId)];
// 存在しないページに遷移した場合、標準のエラーページに遷移させる。
if (user === undefined) {
　　notFound();
}
return (
  <>
    <h1 className='text-lg border-b pb-1 mb-1'>{user.name}</h1>
    <p>{user.prof}</p>
    <p className='mt-4'>
      <Link href='/' className='text-blue-500 hover:text-blue-700'>
        Go Back
      </Link>
    </p>
  </>
);

存在しないユーザーのidが入力された時のように、ユーザーが存在しないことを知らせる特別なファイルを作ることもできる。

// app/users/not-found.tsx
import Link from 'next/link';

export default function UserNotFoundPage() {
  return (
    <>
      <h1 className='text-lg border-b pb-1 mb-1'>Error</h1>
      <p>User not found.</p>
      <p className='mt-4'>
        <Link href='/' className='text-blue-500 hover:text-blue-700'>
          Go Back
        </Link>
      </p>
    </>
  );
}
Posted in React