はじめに

本記事は、以下のNEXTJSのチュートリアルの内容をまとめたものである。

目次

事前準備
ルーティングについて
全ページ表示させるコンポーネントの配置先
API呼び出しの方法について
Server Side Renderingの特徴
どちらのコンポーネントで実装するか

事前準備

プロジェクトの作成

$ npm create next-app

以下で実行できることを確認

$ npm run dev

ルーティングについて

基本形

src/appフォルダ配下に任意の名称のフォルダを作成し、そのファイル名をpage.tsxとする

これだけで、/フォルダ名　のページにルーティングできるようになる。
/about というリソースを作成する場合は以下のようにする。

src/app/a¬bout/page.tsx

 export default function About(){
    return (
        <div><h1> This is about page.</h1></div>
    );

ネストしたroute

src/app/about/us/page.tsx

 export default function AboutUs(){
    return (
        <div><h1> This is about us page.</h1></div>
    );

dynamic route

src/app/about/[id]/page.tsx

export default function AboutWithId({ params }: any) {
  return (
    <div>
      <h1> This is the about page with ID: {params.id} </h1>
    </div>
  );
}

全ページ共通で表示させるコンポーネントの配置

Navbar
Footer
など

Navbarをつけたい場合

src/app/components/navbar.tsx

import Link from "next/link";

export default function Navbar() {
  return (
    <div>
      <Link href="/about"> About </Link>
      <Link href="/about/us"> About Us</Link>
    </div>
  );
}

デフォルトで作成されている以下でrouteが管理されている。
{children}が、それぞれのpageの中身なので、その上にNavbarを入れればいい。

src/app/layout.tsx


import "./globals.css";
import { Inter } from "next/font/google";
+ import Navbar from "./components/navbar";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
+       <Navbar />
        {children}
      </body>
    </html>
  );
}

API呼び出しの方法について

api呼び出し(x1)

src/app/listofposts/pages.tsx


const getPostsData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  return res.json();
};

export default async function ListOfPosts() {
  const posts = await getPostsData();
  return (
    <div>
      {posts.map((post: any) => {
        return <p> {post.title} </p>;
      })}
    </div>
  );
}

api呼び出し(x2)

src/app/listofposts/pages.tsx


const getPostsData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  return res.json();
};

+ const getUsersData = async () => {
+  const res = await fetch("https://jsonplaceholder.typicode.com/users");
+  return res.json();
+ };

export default async function ListOfPosts() {
- const posts = await getPostsData();
+  const [posts, usres] = await Promise.all([getPostsData(), getUsersData()]);
  return (
    <div>
      {posts.map((post: any) => {
        return <p> {post.title} </p>;
      })}

+      {usres.map((user: any) => {
+        return <p> {user.name}</p>;
+      })}
    </div>
  );
}

Server Side Renderingはスタティックである

サーバーコンポーネントは、ブラウザのイベントやuseState hooksなどを使用できない。
また、基本的に最初のロード時にキャッシュされるため、中の要素はスタティックになる。

キャッシュの設定(時間設定なし)

リロード時に毎回APIを呼び出しフェッチしたい場合

src/app/listofposts/pages.tsx

import Image from "next/image";

const getPostsData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  return res.json();
};

const getUsersData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const getDogData = async () => {
-  const res = await fetch("https://dog.ceo/api/breeds/image/random");
+  const res = await fetch("https://dog.ceo/api/breeds/image/random", {
+    cache: "no-store",
+  });
  return res.json();
};

export default async function ListOfPosts() {

  const [posts, usres, dog] = await Promise.all([
    getPostsData(),
    getUsersData(),
    getDogData(),
  ]);
  return (
    <div>
      <Image src={dog.message} alt="dog" width={300} height={300} />
      {posts.map((post: any) => {
        return <p> {post.title} </p>;
      })}

      {usres.map((user: any) => {
        return <p> {user.name}</p>;
      })}
    </div>
  );
}

キャッシュの設定(時間設定あり)

指定秒数以上開けてリフレッシュされた場合に再取得したい場合
※以下例だと３秒以上開けた後ににリフレッシュした場合再フェッチされる

const getDogData = async () => {
  const res = await fetch("https://dog.ceo/api/breeds/image/random", {
    next: {
      revalidate: 3,
    },
  });
  return res.json();
};

他のウェブサイトやapiから画像を取得して表示させるためには、以下に取得を許可するドメインを設定する必要がある。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
+  images: {
+    domains: ["images.dog.ceo"],
+  },
};

module.exports = nextConfig;

page以外の要素

error

サーバエラー発生時にクライアントにエラーを表示させたい場合に使用
※クライアント側のコンポーネントである必要があるため、"use client"が必要。

src/listofposts/error.tsx

+ "use client";

export default function Error() {
  return <div> There was an error loading the data.</div>;
}

loading

ページ読み込みの際に、「Loading...」のような表示をさせたい場合に使用

src/listofposts/loading.tsx


export default function Loading(){
  return <div> Loading...</div>;
}

目的の違い

クライアントコンポーネント: ユーザと実際のクライアント（ブラウザ）の間を取り持つ。そのため、ブラウザイベントや、React Hooks（ブラウザのステートなど）を管理する。
サーバーコンポーネント: コンポーネントをサーバにレンダリングすることで、クライアントに送信しロードするjavascriptの量を減らすことができる。