[Next.js] Next.js 세팅 및 구성 설명

1. npx를 사용해서 프로젝트 생성 

npx create-next-app@latest --typescript 프로젝트명

@latest 옵션을 추가하면 최신 버전의 Next.js를 설치할 수 있다. 

만약 typescript를 함께 사용할 계획이라면 --typescript 옵션을 통해서 같이 사용할 수 있다. ( 필수는 아님 )

 

2. pages 

Next.js를 사용하면 프로젝트에 Page를 추가하는 작업은 매우 쉬워진다.

React 컴포넌트를 export 하고 있는 파일을 pages 폴더 안에 넣어두기만 하면 된다. 

그러면 Next.js가 자동으로 파일의 이름을 가져가서 url의 경로로 사용한다.  

 

만약 React를 사용할 경우에는 router를 만들고, routes를 설계한 다음에 랜더링 하는 작업을 해야 하지만 

Next.js는 자동으로 처리해주는 것이다. 

 

또 만들어지지 않은 페이지를 접근할 경우 자동으로 404 페이지를 화면에 보여줘서 사용자에게 알려줄 수 있다. 

물론 404 페이지는 기본으로 제공하지만, 커스텀도 가능하다. 

 

3. public 

React와 마찬가지로 여러 가지 정적 파일을 보관하고, 필요에 따라 가지고 올 수 있다. 

public에서 파일을 가져올 때 "../public/파일명" 방식으로 가져올 필요 없이, "/파일명"으로 손쉽게 가져올 수 있다.