Next.js

Next.jsとは

Reactのフレームワーク

・設定をある程度フレームワーク側で自動的に設定してくれる

・Pre-Rendering が簡単にできる

・Rendering のタイミングを選択できる

・Routing の設定を書かなくても良い

 

設定

①Reactと同じでcreateコマンドを実行するだけで自動的にBabelやwebpackの設定をしてくれる

 

②関連してCodeSpittingのような最適化のための設定もある程度行ってくれる

npx create-next-app app_name

HTML生成タイミング

・StaticGeneration

　・ビルド時にHTMLを生成し、アクセス時にそれを表示

・Server-SideRendering

　・アクセス時に生成し、それを表示

・Client-SideRendering

　・ページ表示後にHTMLを生成し、それを表示

ページ
表示速度		 全コンテンツ
表示速度		 SEO対策
Static
Generation		 ○ ○ ○
Server-Side
Rendering		 △ △ ○
Client-Side
Rendering		 ○ × ×

Routing

・Next.jsではpagesディレクトリ以下のディレクトリ構造で自動的にルーティングを設定してくれる

・面倒なルーティングの設定を書かなくて良い

・ダイナミックルーティングにも対応

Routing

pages/bulletin_board_topics/index.js

=> /bulletin_board_topics

pages/bulletin_board_topics/[id].js

=> /bulletin_board_topics/:id

pages/bulletin_board_topics/[id]/edit.js

=> /bulletin_board_topics/:id/edit

ページ遷移

Next.js(React)ではHTML全体を再レンダリングするのではなく、<div id="__next">内を切り替えることでページ遷移を表現している。

<html>のスタイルを

背景黄色にして

ページ遷移しても...

何がいいのか

 

まずは表示がヌルッと高速である。

JavaScriptが保持しているデータをページ遷移した後も引き継ぐことができる。

 

Linkコンポーネント

Linkコンポーネントは<a>のラッパーでクライアントサイドナビゲーションを実現するためのコンポーネントです。

import Link from 'next/link'

export default function Home() {
  return (
    <Link href='/bulletin_board_topics'>掲示板</Link>
  )
}

Reactのチュートリアル知識と

Next.jsのLinkコンポーネント

さえわかれば

外部データに依存しないページ

は誰でも簡単に作れる

DataFetching

getStaticProps()

getServerSideProps()

・外部データを取得するために使う

・async/awaitで非同期処理の制御

・pageコンポーネントでのみ使用可能

使用方法はこの名前で関数を作り、exportするだけ。

DataFetching

getStaticProps()

・ビルド時に実行され、データを取得

getServerSideProps()

・リクエスト時に実行され、データを取得

Renderのタイミングに影響する

export async function getServerSideProps() {
  const res = await fetch('https://api/url')
  const json = await res.json()
  return {
    props: {
      bulletin_board_topics: json.bulletin_board_topics
    }
  }
}

export default function Index({ bulletin_board_topics }) {
  return (
    <>
      <h1>掲示板一覧</h1>
      {bulletin_board_topics.map((data) =>
        return <div>{data.title}</div>
      )}
    </>
  )
}

Cliant-SideRendering

BONDGATEはSEOを考える必要が薄いので、必ずしもサーバーサイドレンダリングにする必要はない。

なので、外部データに依存する部分だけクライアントサイドレンダリングにするのが望ましいだろう。

そういう場合はSWRというライブラリを用いて実装する。

import useSWR from 'swr'

async function fetcher(url) {
  const res = await fetch(url)
  const json = await res.json()
  return json.bulletin_board_topics
}

export default function Index({ bulletin_board_topics }) {
  const { data, error } = useSWR('https://api/url', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return (
    <>
      <h1>掲示板一覧</h1>
      {bulletin_board_topics.map((data) =>
        return <div>{data.title}</div>
      )}
    </>
  )
}

SWR

FetchAPIではなくSWRを用いる主なメリットはSWRの強力なキャッシュ機能を利用するところにある。

また、データの再フェッチも優秀で取得するデータが変更があった場合に関数を再実行することなく再フェッチしてくれる。

おまけでデータ取得の状態管理が容易。

Next

By Ryosuke Hiroe

Made with Slides.com

Next

  • 90

More from Ryosuke Hiroe