More than 3 years have passed since last update.

MacでNext.jsのGettingStartedを進めてみる (2)

Last updated at 2021-06-01Posted at 2021-05-23

Macで Next.jsの公式Getting Startedを進めてみたメモ。

使用した環境は Intel Mac + Catalinaです。
バックエンドとしてはstrapiを使っていきます。

前回の記事で Getting Started の章をやりました。
今回は Basic Features / Pages やっていきます。

2. Basic Features / Pages をやってみる

続いてBasic Features / Pagesページの内容をやってみます。

2.1. Static Generation without dataの例

Next.jsのSSG(静的サイト生成)について触れられているところで about ページを作るところがあったので作ってみる。
こちらもTypeScriptで作成する。

pages/about.tsxを下記の内容で作成する

pages/about.tsx

function About() {
  return <div>About</div>;
}

export default About;

ブラウザで作成したページを開いてみる
command
```
$ open http://localhost:3000/about
```

[ちょっと寄り道] バックエンドAPIの作成

次のセクションでバックエンドのCMSがあった方が良さそうなので、strapiでサクッと建てる。

strapi用にターミナルを別で起動して、作業用のフォルダに移動する
command
```
cd ~/devel/
```

strapiのプロジェクトを作成する

command

$ yarn create strapi-app --quickstart next-sample-backend

output

yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

~~~~~~~~ 中略 ~~~~~~~~

One more thing...
Create your first administrator 💻 by going to the administration panel at:

┌─────────────────────────────┐
│ http://localhost:1337/admin │
└─────────────────────────────┘

ブラウザが開くので必要な情報を入力する（ブラウザが機能しない場合は http://localhost:1337/admin にアクセスする）
strapiの管理画面が開くので、［Content-Type Builder］→［Create new collection type］を選択する
［Display name］に Post と入力し、［続ける］をクリックする
とりあえずtitleがあれば良いようなので、［Text］をクリックする
［Name］に title と入力し、［終了］をクリックする
Postとして作成する内容が表示されているので、問題なければ（ないと思うけど）［保存］をクリックする
strapiがリスタートするまで待つ
次に /posts のエンドポイントを公開する設定をするため、［設定］→［ロールと権限］を開いて、［Public］の行をクリックする
Publicの設定が表示されるので、［権限］エリアの［find］と［findone］にチェックを入れる
続いてデータを投入する。［コレクションタイプ］→［Posts］をクリックし、［Postsを追加］ボタンをクリックする
［Title］に適当な文字（例の場合はほげ）を入力し、［保存］をクリックする
保存されたデータを公開するために［Publish］をクリックする
［Published］が表示されれば作成できた
［Posts］をクリックして一覧画面に戻り、同様にデータを何件か追加する（例ではふがをtitleに持つデータを追加

これで http://localhost:1337/posts にアクセスしたときに適当にタイトルが返るAPIが作成できた

command

$ curl http://localhost:1337/posts

output(整形済)

[
  {
    "id": 1,
    "title": "ほげ",
    "published_at": "2021-05-23T09:13:53.895Z",
    "created_at": "2021-05-23T09:13:47.938Z",
    "updated_at": "2021-05-23T09:13:53.906Z"
  },
  {
    "id": 2,
    "title": "ふが",
    "published_at": "2021-05-23T09:14:09.970Z",
    "created_at": "2021-05-23T09:14:08.718Z",
    "updated_at": "2021-05-23T09:14:09.980Z"
  }
]

このままstrapiは起動したままにして

2.2. Static Generation with dataの例

2.2.1. シナリオ１ getStaticPropsを使う例

下記の内容で pages/blog.tsx を作成する

公式にファイル名の記載がなかったので適当
型は暫定的に anyを設定

pages/blog.tsx

function Blog({ posts }: {posts: any}) {
  return (
    <ul>
      {posts.map((post: any) => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch("http://localhost:1337/posts");
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}

export default Blog;

ブラウザで開いてみる
command
```
$ open http://localhost:3000/blog
```

先ほどstrapiで登録したPostのtitleが表示された。

2.2.2. シナリオ２ getStaticPathsを使う例

下記の内容で pages/posts/[id].tsx を作成する

型は暫定的に anyを設定

pages/posts/[id].tsx

function Post({ post }: {post: any}) {
  // Render post...
  return <h1>[{post.id}] {post.title}</h1>;
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch("http://localhost:1337/posts");
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post: any) => ({
    params: { id: String(post.id) },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

// This also gets called at build time
export async function getStaticProps({ params }: {params: any}) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`http://localhost:1337/posts/${params.id}`);
  const post = await res.json();

  // Pass post data to the page via props
  return { props: { post } };
}

export default Post;

Render post... のところは適当にタグを生成
getStaticPaths の params は Stringでないとエラーが出るので、公式では params: { id: post.id }, だったところを params: { id: String(post.id) }, に修正

ブラウザで開いてみる
command
```
$ open http://localhost:3000/posts/1
```

先ほどstrapiで登録したPostのid=1のtitleが表示されました。

次回は Basic Features / Data Fetching を進めていきます。

MacでNext.jsのGettingStartedを進めてみるシリーズの記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up