[Next.js] Set Routes

Set Routing

pages 폴더에 js 파일을 생성하면, 그 파일로 routing이 되고 파일의 이름이 param이 된다.

Dynamic Routes

[ ].js

pages 폴더 안에 폴더를 생성하면, url의 구조가 생성된다.

|-- pages
|---- users
|--------[id].js : userInfo 페이지

이렇게 생성하면, url은 /users/1과 같이 생성된다. [ ].js 파일은 동적 라우팅을 사용하고자 할 때 파일명이다.

useRouter()

// pages/users/[userId].js
import { useRouter } from "next/dist/client/router";

function UserInfo() {
  const router = useRouter();
  console.log(router)
  /* 
	router 👇
	{pathname: '/users/[userId]', route: '/users/[userId]', query: {…}, asPath: 	'/users/1', components: {…}, …}
   */
  
  return <div>This is the UserInfo.</div>;
}
export default UserInfo;

useRouter를 사용하면, 현재 페이지의 router 정보를 객체로 받아 활용할 수 있다.