Routing

ルート

routerオブジェクトを使用してページ間を移動します.

スタティツクルーティング

接続するたびに同じページに移動します.必要なページに応じて、vscodeはすべてのフォルダとファイルを作成する必要があります.ログイン画面のように、いつも同じ画面が表示されるページに移動しても構いませんが、投稿のようにクリックするたびに新しいページに移動する場合は、使いづらいです.

動的ルーティング(Dynamic Routing)

静的ルーティングとは異なり、1つのフォルダ名を変数として作成し、1つのフォルダとファイルのみを使用してページ移動を実行できます.pages > boards > [변수명]
このようにフォルダを作成し、routerを使用します.pushを使用して、受信した変数値を変数名に挿入し、必要なページに移動できます.

useRouter

hooksの1つであるuserrouterを使用してrouterオブジェクト機能を使用できます.

import { useRouter } from 'next/router'
// next에서 useRouter import 해주기

export default function Board1() {
const router = useRouter()
// 생성할 페이지 함수 안에 router 변수 선언
}

router.Pushオブジェクトは他のページに移動できます.

router.push(`/boards/${result.data.createBoard._id}`)
// 페이지 이동 이벤트 핸들러 함수 안에 작성

backticシンボルに/변수 폴더가 담긴 상위 폴더이름/${연결된 페이지에서 받아온 값}を順番に入れると、template literalを使って簡単に書くことができます.

template literal

文字と変数を一緒に書くことができます.
`通常文字${変数}`
このように${}のカッコに変数を挿入すると、文字列や変数を書き込むたびに「」や+のような記号を面倒に使う必要がなくなります.