1. 들어가기

프로젝트 세팅

npx create-next-app@latest
or
yarn create next-app

위의 명령어 입력 후 엔터 치고 프로젝트 이름 입력하고 엔터 치고, 물어보는 거 다 yes 해주면 세팅 완료.

그냥 메모 : VS Code 열기 명령어

원하는 디렉토리로 cd 해주고

code .

2. 폴더 관리

Static & Dynamic routing

1) Static routing
폴더 안에 tsx 파일 만들면 /폴더 url 입력 시 해당 파일이 출력

2) Dynamic routing
폴더 안에 [id] 이런 식으로 대괄호로 감싸주고, 그 안에 파일 만들기.
폴더명/id값 입력시 id마다 다른 내용이 라우팅

Route group

3) 단지 폴더 구분을 위해 폴더 생성

단지 폴더 구분을 위해, 즉 경로로 잡히지 않게 하려면 소괄호로 폴더명을 감싸면 된다. 위와 같이 폴더 생성 시, localhost:3000/about 이렇게 입력해야 page.tsx가 띄워짐.

3. 특수한 파일명

layout.tsx VS template.tsx

• layout.tsx : 리렌더링 되지 않음
  보통 이걸 사용
  폴더마다 layout.tsx 파일 만들면 해당 폴더의 컴퍼넌트에만 적용
• template.tsx : 리렌더링 됨
  언제 쓰나? -> 페이지 이동 시 특정 애니메이션을 주고 싶을 때 등, 정말 필요한 케이스에만

not-found.tsx

• 없는 경로로 들어갈 경우 뜨는 "404 에러 존재하지 않는 페이지입니다" UI 지정
• 경로: src/not-found.tsx
  

4. Metadata

• Next.js가 제공하는 헤더 같은 것
• index의 title 같은 부분! 루트 layout에 있는 코드를 바꾸면 전역 적용됨
• page에 적으면 페이지에만 적용, layout에 적으면 해당 폴더의 페이지 모두 적용

export {Metadata} from "next";

expost const metada: Metadata = {
  title: "내웹사이트"
  description: "내 웹사이트 입니다"
}

5. 페이지 이동

a 태그 대신 Link 태그, 혹은 useRouter를 사용하자

Link 태그 사용 이유

• prefetching 지원
  사용자가 링크를 클릭하기 전에 데이터를 미리 로드함으로써 사용자가 링크를 클릭했을 때 거의 즉시 페이지를 볼 수 있게 함
  링크 클릭 시가 아닌, 링크 자체가 화면에 나타났을 때 (뷰포트에 나타나 있을 때) 이미 데이터를 로드
• route 사이에 client-side navigation 지원
  브라우저가 새 페이지를 로드하기 위해 서버에 요청을 보내는 대신, 클라이언트 측에서 페이지를 바꾸어 주기 때문에 페이지 전환 시 매우 빠른 사용자 경험 (UX) 제공
  페이지의 HTML을 서버에서 다시 가져올 필요 없이, 필요한 JSON 데이터만 서버로부터 가져와서 클라이언트에서 페이지를 재구성하여 렌더링함

Router (useRouter)

• 코드 상단에 "use client" 삽입 필수
• 대부분 onClick 같은 이벤트 핸들러에서 사용
• 클릭 후 핸들러 로직의 순서에 따라 실행하므로, 즉시 이동이 아님
• 웬만하면 Link를 쓰고, 클라이언트 컴퍼넌트면 useRouter를 써주면 된다.

Router 형태

1) router.push : history stack이 쌓임.
2) router.replace : history stack이 초기화됨. 새로운 url로 교체됨. 예를 들면, 로그아웃 후 넘어가는 페이지는 replace를 사용할 수 있다. 이전 페이지로 이동할 필요가 없기 때문에.
3) router.back : history stack에서 한 단계 뒤로 이동
4) router.reload : 현재 페이지 새로고침