1. Dynamic Routes
동적 라우팅은 일반적으로 url을 pages/post/123으로 접근했다면 next.js에서는 pages/post/[params].js파일을 만들어서 pid를 담는다.
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { params } = router.query
return <p>Post: {params}</p>
}
export default Post
- next/router모듈에서 useRouter를 가져와서 사용할 수 있다.
- useRouter에서 router로 변수를 선언해주고, router.query를 출력한다.
- 출력해보면 아래와 같이 나온다.
- 파일을 만들 때 해당 변수로 해서 만들어야 배열로 담을 수 있다. 그렇지 않으면 undefined라고 뜬다.
2. Catch All
일일히 []/[]/[] 형태로 감싸주지 않아도 모든 routing을 잡아낼 수 있다. ...괄호 안에 세 개의 점( )을 추가하여 모든 경로를 포착하도록 동적 경로를 확장할 수 있다.
그리고 pages/post/[[...slug]].js파일의 경우 /post, /post/a/, post/a/b의 경우가 나눌 수 있다. 출력해보면 아래와 같이 출력된다.
{ } // GET `/post` (empty object)
{ "slug": ["a"] } // `GET /post/a` (single-element array)
{ "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)
3. 404 Error
라우터를 지정해놓지 않은 경우 url을 임의로 쳤을 때 404페이지가 나온다. 이를 커스텀할 수 있는데 page폴더에서 404.js파일을 만든다.
그리고 본인의 취향에 맞게 꾸미면 404에러 페이지가 떴을 때 내가 꾸민 페이지를 볼 수 있다.
Dynamic Routes
동적 라우팅은 일반적으로 url을 pages/post/123으로 접근했다면 next.js에서는 pages/post/[params].js파일을 만들어서 pid를 담는다.
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { params } = router.query
return <p>Post: {params}</p>
}
export default Post
- next/router모듈에서 useRouter를 가져와서 사용할 수 있다.
- useRouter에서 router로 변수를 선언해주고, router.query를 출력한다.
- 출력해보면 아래와 같이 나온다.
- 파일을 만들 때 해당 변수로 해서 만들어야 배열로 담을 수 있다. 그렇지 않으면 undefined라고 뜬다.
2. Catch All
일일히 []/[]/[] 형태로 감싸주지 않아도 모든 routing을 잡아낼 수 있다. ...괄호 안에 세 개의 점( )을 추가하여 모든 경로를 포착하도록 동적 경로를 확장할 수 있다.
그리고 pages/post/[[...slug]].js파일의 경우 /post, /post/a/, post/a/b의 경우가 나눌 수 있다. 출력해보면 아래와 같이 출력된다.
{ } // GET `/post` (empty object)
{ "slug": ["a"] } // `GET /post/a` (single-element array)
{ "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)
3. 404 Error
라우터를 지정해놓지 않은 경우 url을 임의로 쳤을 때 404페이지가 나온다. 이를 커스텀할 수 있는데 page폴더에서 404.js파일을 만든다.
그리고 본인의 취향에 맞게 꾸미면 404에러 페이지가 떴을 때 내가 꾸민 페이지를 볼 수 있다.
