NEXT

Next.js는 풀스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크
Next.js는 디렉토리 별로 라우팅을 자동으로 생성 해줍니다.
NEXT는 기본적으로 서버컴포넌트를 지원합니다.

File

Layout,Template

Next 13버전에서 도입 루트 레이아웃은 최상위 레이아웃으로 디렉토리 주소가 바뀌어도 어디든 적용(이것으로 공통 레이아웃 적용)

주소, 페이지 별로 다르게하고 싶으면 해당 디렉토리에서 레이아웃 생성후 children으로 받으면 됩니다.

ps.매번 새롭게 마운트가 (리렌더링?) 안되게 하고싶으면 layout, 반대의 경우 template

이미지(png,jpg 등)도 Image 태그를 통해 import 할 수 있음 알아서 최적화도 진행 (옵티마이징 이미지스)

Default

디렉토리의 페이지가 필요없을 경우 default.tsx로 return null 해주면 됩니다.

라우팅

페이지 별 주소를 다르게 하고싶으면 app 하위로 만들고 싶은 디렉토리를 생성합니다.

디렉토리명은 일반적인 string도 되지만 동적 url도 생성이 가능합니다.

동적 URL

동적 url일 경우 []대괄호 안에 디렉토리명을 넣어주면 삽입하면 됩니다.

ex ) [username] - stat - [id]

공통적으로 쓰이는 페이지 같은 경우(notFound Page) app 하위에 생성 하여 사용 합니다.

패러렐 라우트(병렬 라우트)

직관적인 이름과 같이 여러 페이지를 동시에 보여줄때 레이아웃과 페이지를 보여줍니다.
보여줄 페이지들은 동일한 디렉토리에 위치 해야 합니다.

@경로로 루트에서부터 파일 import

인터셉팅 라우티트

NEXT는 디렉토리명을 기준으로 동적 url을 생성하는데,
디렉토리명에 (.)디렉토리명, (..)디렉토리명 등으로 상대경로명을 지정해주면 그 디렉토리의 라우팅을 가로채게 됩니다. (클라이언트에서 라우팅 할 때만 인터셉트 라우팅 적용)

패러랠과 인터셉팅 혼용 시 기존화면위에 다른 화면을 띄울 수 있습니다.

• 리로드 시, 직접 접근 시에는 인터셉팅 라우트 발생 X
• 링크를 통해 클라이언트단에서 라우팅이 실행 될 경우 인터셉팅 라우트 발생 O

other...

‘use client’

useState 등의 함수들은 기본적으로 클라이언트 컴포넌트에서만 사용이 가능합니다.
그러나 NEXT에서는 기본적으로 서버 컴포넌트를 지원하기 때문에 파일 최상단에 useClient를 작성해야 클라이언트 컴포넌트로 변환이 가능하고, useState등의 훅을 사용할 수 있습니다.

Private folder

라우팅에서 제외 시켜줄 때 사용하는 디렉토리 입니다.
폴더 정리용으로 공통되는 컴포넌트를 정리해줄 때 사용되는 디렉토리 입니다.
디렉토리명 처음에 _를 붙혀 생성합니다.

useRouter

클라이언트에서 라우팅하는 훅입니다.
기존 Redirect는 서버 에서 리다이렉트 시키는 함수이기 때문에 인터셉팅 라우팅이 작동 하지 않습니다.(인터셉팅 라우팅은 클라이언트에서 라우팅 할때만 발생)
ex) router = useRouter();
router.replace(‘경로명’)
or
router.push(‘경로명’)

뒤로가기 시
Replace는 2 전으로
push는 1 전으로

css module 사용 이유

tailwind 가독성 x
styled component 서버 컴포넌트에서 문제
sass
vanilla extract windows와문제
100dvw, 100vh 주소창이 생겨도 전체화면 유지