Next.js
React와 달리 프레임워크로써 사용자가 NextJS을 따라야 한다.
Next.js의 첫 페이지는 무조건 app/page 파일이다.
client / server component로 이루어져 있다.
Next.js 에는 중요한 파일명이 몇 개 있다.
- page : 페이지에서 제일 처음 보여질 파일
- layout
- 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 에러가 발생한다.
출처 : 노마드코더 (직접 듣기 강추!)