이번 사이드 프로젝트에선 Next.js를 사용해 보기로 정했기 때문에 미리 Next.js를 공부하려고 강의를 펼쳐보았다.

마침 노마더 코더에서 Next.js 강의를 무료로 배포하고 있었다. (땡큐!)

Next.js 가 페이지를 랜더링하는 방식

react를 사용하면 react router DOM 을 사용해, router를 만들고 routes를 설정하고 component를 import 해야 했는데 pages 에 들어있는 파일의 이름을 가져다가 url로 사용한다니...! 엄청 편한 것 같다!

몇가지 예외가 있는데 첫번째는 바로 index.js 파일이다. 파일 이름을 index.js 로 설정하면 localhost:3000/으로 설정된다.

두번째는 jsx를 사용할 때 import react 를 할 필요가 없다는 점!
하지만 useState나 useEffect 같은 리액트 메소드를 사용하고 싶다면 임포트 해야한다.

export default function Home(){
	return (
    	<h1>Hello</h1>
    )
}

그리고 한가지 꼭 기억해야 할 규칙은 export default function 이름() 을 해야한다는 것이다. export default 를 사용하지 않으면 에러를 만날 수 있다.

react를 사용하면 404페이지를 직접 만들어줘야 했는데 next.js는 404 페이지를 제공한다는 것이 신기했다.