22.06.21 Error: The default export is not a React Component in page

내가 컴포넌트 정의를 이런 식으로 해서

리액트는 Details 라는 이름의 파일을 가진 컴포넌트를 찾고 있었던 것이다. 

export const Details = () => {
	return <div></div>
}

근데 나는 Next.js 의 useRouter() 함수를 통해 이전 페이지의 라우터 id 값을 받아오기 위해서 

파일명을 [id].tsx 로 바꾸었기 때문에 리액트 입장에서는 엥 Details 라는 컴포넌트가 없는데? 라고 해서 나온 에러이다. 

export default 방식으로 컴포넌트를 정의해야 한다. 

function Details() {
  const router = useRouter()
  const { id } = router.query
  console.log('router.query', router.query)
  return <div>{id}</div>
}

export default Details