[Next.js] 사용법과 Route

Next.js

React와 달리 프레임워크로써 사용자가 NextJS을 따라야 한다.
Next.js의 첫 페이지는 무조건 app/page 파일이다. 
client / server component로 이루어져 있다.

 

Next.js 에는 중요한 파일명이 몇 개 있다. 

• page : 페이지에서 제일 처음 보여질 파일 
• not-found : 존재하지 않는 url을 검색했을 때 보여줄 파일 

 

 

Route

/app/layout, /app/page 같은 경우 경로가 root("/")에서 보게 될 페이지이기 때문에 root segment라고 한다. 

 

/app 폴더 내에 폴더명이 route 경로이며 무조건 파일 이름은 page!

page 파일이 없으면 그 폴더는 그냥 컴포넌트들을 갖고 있는 일반적인 폴더가 되며 url이 될 수 없다.

 

 

 

다음과 같이 /app 이 구성되고 

layout.tsx 를 제외한 각 tsx 페이지의 코드가 아래와 같을 때 

export default function 폴더명() {
  return <h1>폴더명!</h1>;
}

 

 

 

Q. localhost:3000/about-us 의 경로에는 about-us! 라는 페이지가 뜰까? 

A. 뜬다. 왜냐하면 about-us 폴더의 page 파일의 내용을 불러오기 때문이다.

 

Q. localhost:3000/about-us/company 경로에는 company! 라는 페이지가 뜰까?

A. 뜨지 않는다. 왜냐하면 company 폴더에는 page 파일이 없기 때문에 company 경로로 들어가면 404 에러가 발생한다.

Q. localhost:3000/about-us/company/sales 경로에는 sales! 라는 페이지가 뜰까?

A. 뜬다. 왜냐하면 sales 폴더에는 page 파일이 존재하기 때문이다.

 

Q. localhost:3000/components 경로에는 components! 라는 페이지가 뜰까?

A. 뜨지 않는다. 왜냐하면 components 폴더에는 page 파일이 없을 뿐더러 components 파일은 Next.js가 읽지 못하기 때문에 404 에러가 발생한다.