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のメソッドなどいろいろ見ていきます。
```js
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
```


# 資料

https://www.udemy.com/course/react-complete-guide/