Next 보일러플레이트 앱 라우터 폴더구조와 설치,Server컴포넌트, Client컴포넌트

13버전부터는 layout이 생성이된다

layout은 최상위폴더라고 생각하면 편하다. -> 모든페이지에 공통적으로 layout이 적용이 되어버림

layout이 children을 포함하고 있음.

page를 넘나든다고 생각하면 됨.

 

폴더 만들때 () 소괄호는 주소창에 관여를 안함.

app/(login)/home -> 브라우저에서는 /home

 

 

 

layout.tsx -> 리랜더링이 되고싶을때

template.tsx -> 리랜더링이 안되게하고싶을때 사용 //페이지 넘나들떄마다 기록을해야됨 (구글애널리틱스같은거)

 

css관련

테일윈드 -> 호불호 너무심하고 가독성이 안좋음

스타일 텀포넌트 -> 서버컴포넌트 ssr 넥스트 14버전이랑 호환이 잘 안됨

sass

css module 

vanilla extract -> 요새 핫한데 윈도우랑 문제가 있음

 

 

 

npx create-next-app@latest

 
 
실행 : npm run dev

 

 

 

 

app폴더에는 라우팅할 애들만 넣어준다

라우팅안할 애들은 src아래에 폴더구조를 만들어줘서 넣어준다.

 

 

 

 

단순히 보여주는것은 server컴포넌트로,

사용자와 상호작용하는것은 client컴포넌트로 생각하면 된다

기본 티폴트는 서버 컴포넌트임.