Reactに向けたNext.jsの使い方

Next.jsとは

React開発のためのフレームワークです。Vercelと言う会社が提供しています。

Reactとどう違うのか

UIを構築するための機能を提供するライブラリーがReactだが、
Next.jsはReact開発のための機能を提供します。

どんな機能があるか

・SSR,SG,ISG
・ファイルベースルーティング
・API作成
・ゼロコンフィグ

ルーティングの書き方

まずはルーティングの書き方から見ていきます。
最初にページファイルの作成をしていきます。
ルーティングしたい対応するファイルをpagesディレクトリ内に作ります。
今回はpages\01_routerのindex.jsに書いていきます。

pages\01_router\index.js

export default function Home(){
  return<h1>ホーム画面</h1>
}

//http://localhost:4040/01_router

npm run dev
//ホーム画面と出力

で実行します。

pages\01_router\page\blog.js

export default function Page() {
    return <h1>ページ</h1>
}
//http://localhost:4040/01_router/page/blog

同じように実行してページと出力されます。

ダイナミックルート

ダイナミックルートを使って、パスの一部を動的に処理できます。
これで、動的なパラメーターを含むルートを作成し、その値に基づいて異なるコンテンツが表示できます。

ex) ブログが投稿されるたびにURLは増えていきます。

//http://localhost:4040/01_router/blog/1
//http://localhost:4040/01_router/blog/2
//http://localhost:4040/01_router/blog/3

pages\01_router\blog[number].js

export default function Number(){
    return <h1>[number].js</h1>
}
/ http://localhost:4000/07_router/blog/1
// http://localhost:4000/07_router/blog/2
// http://localhost:4000/07_router/blog/3

URLの数字を変えると挙動が変わるはずです。

指定された値のパスをJSで取得

指定された値のパスをJSで取得する方法です。

setting.js

export default function Setting({greeting}){
    return <h1>{greeting}</h1>
}


export async function getServerSideProps(){
    return{
        props: {greeting:'ハロー'}
    }
}
//ハロー
//http://localhost:4040/07_router/a/setting

次はqueryを使っていきます。

setting.js

export default function Setting({query}){
    return <h1>{query.name}</h1>
}
//http://localhost:4040/07_router/Luffy/setting

export async function getServerSideProps({query}){

    return{
        props: {query}
    }
}
//http://localhost:4040/07_router/Luffy/setting
//Luffy

次はRouterからuseRouterと言うライブラリーを読み込む方法があります。

setting.js

import {useRouter} from "next/router";

export default function Setting({query}){
    const router = useRouter();
    console.log(router)
    return <h1>routerから取得できたぞ！{router.query.name}</h1>
}

export async function getServerSideProps({query}){

    return{
        props: {query}
    }
}
//http://localhost:4040/07_router/Luffy/setting
//routerから取得できたぞ！Luffy

簡単にコードを説明します。

useRouterは、現在のリクエストの情報を取得するために使います。
getServerSidePropsは、サーバーサイドで実行される特殊な関数で、
ページがレンダリングされる前にサーバーサイドでデータを取得します。
queryパラメーターはqueryのオブジェクトから取得できます。
これはURLの末尾にある?以降の値です。

useRouterで画面遷移

useRouterで画面遷移を見ていきます。Routerのメソッドなどいろいろ見ていきます。

import {useRouter} from "next/router";

export default function Setting({query}){
    const router = useRouter();
    const clickHandler = () => {
        router.push('/');
        //router.push('/','practice-url'); //'practice-url'はトップページを開くときに使われる　http://localhost:4040/practice-url
        //router.replace('/','practice-url');//今表示されていり履歴を上書く機能
        //router.reload();画面がリロード
        //router.back();//1つ画面に戻る
    }

    return (
    <>
    <h1>routerから取得できたぞ！{router.query.name}</h1>
    <button onClick={clickHandler}>アクションによって画面遷移する</button>
    </>
    )
}
//http://localhost:4040/07_router/Luffy/setting

export async function getServerSideProps({query}){

    return{
        props: {query}
    }
}

Linkコンポーネントを使って画面遷移

Linkコンポーネントを使っていきます。

pages\01_router\index.js

import Link from "next/link"

export default function Home(){
  return(
    <>
      <h1>ホーム画面</h1>
      <Link href={{pathname: "/01_router",query: {
        key: "value"}}}>
        <a>/01_router</a>
      </Link>
      <Link href="/07_router/hello/setting">
        <a>/01_router</a>
      </Link>
    </>
  );
}

シングルコンポーネントで複数画面を作成

クエリパラメーターを使って値を受け渡しをする方法で実装していきます。

index.js

import {useRouter} from "next/router";

export default function MultiPage(){
  const router = useRouter();
  const step = router.query.step ?? 0;//Nullish Coalescing 演算子　　?? 演算子は、左側のオペランドが null または undefined の場合に、代わりに右側のオペランドの値を返します。

  const goToStep = (_step,asPath) => {
    router.push(`/08_multipage?step=${_step}`,asPath);

  }

  return (
    <div>
    {step == 0 && (
      <>
      <h3>Step{step}</h3>
      <button onClick={() => goToStep(1,"/personal")}>次のステップへ</button>
      </>
    )}
    {step == 1 && (
      <>
      <h3>Step{step}</h3>
      <button onClick={() => goToStep(2,"/confirm")}>次のステップへ</button>
      </>
    )}
    {step == 2 && (
      <>
      <h3>Step{step}</h3>
      <button onClick={() => goToStep(0,"/08_multipage")}>次のステップへ</button>
      </>
    )}
    </div>
  )
}
//http://localhost:4040/08_multipage
//http://localhost:4040/personal
//http://localhost:4040/confirm
//http://localhost:4040/08_multipage

資料