Next.js 07. catch 와 not-found page

catch는 매우 간편하다

어제 사용했던 폴더구조에 ...만 추가해주면
movies 뒤에 다른 정보들이 있어도 연결해준다.

설정해준 뒤에 데이터를 추출해 보는데,

어제 포스팅에서 useRouter의 변경으로 최신버전에서 어렵게 useRouter.query와 pathname을 사용하지 못하고 있었는데

폴더구조와 상세페이지를 컨벤션에 맞게 구성해주고 url 파라미터를 가져올 페이지에서 params를 찍어보니

객체가 드디어 아름답게 찍혔다.. useRouter.query가 이렇게 대체된듯하다.

외전으로 서버딴에 API 데이터를 저장? 하는 방법인데

Fast Refresh had to perform a full reload. 오류가 떴었지만,

출력될 페이지 export default 함수와 순서를 바꾸어주니 해결되었다.

이전버전의 404.js 페이지는 not-found.js로 대체되었다.

'use client'

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <span>
        <Link href="/">View all posts</Link>
      </span>
      <style jsx>{`
        span{
          color: #f00;
        }
      `}</style>
    </div>
  )
}

다음과 같이 next.org를 참조해 404 페이지를 스타일링 하면 되겠다.

오늘은 여기까지!