Chapter 06無料公開

1-4. Create React Appとの違いを知る(複数ページの利用)

terrierscript
terrierscript
2020.10.12に更新
このチャプターの目次
  1. 複数ページ
    1. コード例
    2. Tips. 動的ルーティング

さて、セットアップしたところまでではちょっとCRAとの違いが見えてきません。
ここから少しだけNext.jsの魅力がわかる機能を含めながら紹介してみましょう

複数ページ

検証をする際、複数パターンやルーティングを使う部分を試したいことはよくあります。

Create React Appの場合、ルーティングのためにreact-routerの設定をする必要がありますが、Next.jsではpagesディレクトリにファイルを増やせば自動的にルーティングしてくれます。

コード例

$ touch pages/my_new_page.tsx

// pages/my_new_page.tsx

export default function MyNewPage() {
  return (
    <div>
      Hello My New Page!
    </div>
  )
}
// => http://localhost:3000/my_new_pages でアクセス可能に

もちろんディレクトリも考慮されます

$ touch pages/some_dir/dir_page.tsx

この場合は下記のURLでアクセス出来るようになります。

http://localhost:3000/some_dir/dir_page

Tips. 動的ルーティング

また、日々の練習レベルでは使う機会は少ないかもしれませんが、動的ルーティングにも対応しているので、下記のようなことも可能です

$ touch pages/greeting/[name].tsx

[name].tsxというファイル名は少し気持ち悪さもありますが、深く考えずに慣れてしまうほうが幸せになれるでしょう。

これで下記にアクセスできるようになります

http://localhost:3000/greeting/foo

この場合、パラメータはuseRouterを使うかgetServerSidePropsで取得できます

基本的にはuseRouterを利用するのがお手軽です。

import { useRouter } from 'next/router'

export default function GreetingPage() {
  const router = useRouter()
  const { name } = router.query
  return (
    <div>
      Hello {name}
    </div>
  )
}
// => http://localhost:3000/messages/foobaz とすれば「Hello foobaz」と表示される

しかしuseRouterだとクライアント側で処理するために、レンダリング時のチラつきが気になるかもしれません。
その場合はgetServerSidePropsを利用しましょう

import { useRouter } from 'next/router'

export const getServerSideProps = ({ query }) => {
  return {
    props: { name: query.name }
  }
}

export default function GreetingPage({ name }) {
  return (
    <div>
      Hello {name}
    </div>
  )
}