Development/React.js · Next.js

[Next.js] 기본 개념

레오나르도 다빈츠 2023. 12. 20. 14:26

 

 

 

 

 

 

 

 

 

📄 Next.js 명령어

$ npx create-next-app@latest --ts

$ npm i @emotion/react

$ npm i -D @emotion/babel-plugin

 

 

 

📄 Next.js 디렉토리 구조

 

 

  • layout.tsx
  • page.tsx
  • loading.tsx
  • error.tsx
  • not-found.tsx
  • route.tsx
  • default.tsx

 

 

 

 

 

1. 라우팅하는 방법

- route를 따로 설정하지않고 이런 식으로 디렉토리를 생성하면 라우팅된다. (신기방기)

- Next.js 12까지는 pages 폴더에 파일을 만들면 자동으로 라우팅을 지원했지만 Next.js 13부터는 Nested Layout을 위해 app 폴더 구조로 변경되었다.

- Next.js 13 버전부터는 기본적으로 컴포넌트는 서버사이드 컴포넌트이다.

 

 

2. Route Groups(경로 그룹): (name)으로 작성

디렉토리 이름을 (group)으로 설정하여 퐅더가 경로의 URL 경로에 포함되지 않도록 경로 그룹으로 표시할 수 있다. 논리적인 그룹이다. 예를 들어, (marketing)이라는 상위 폴더 아래 about, blog라는 디렉토리를 둘 수 있으며 url에서 (marketing)은 생략된다.

 

 

3. Parallel Routes(병렬 경로): @name으로 작성

동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다.

 

 

4. 에러페이지 처리

 

 

 

 

 

 

참고

🔗 참고한 예제 깃 repo: https://github.com/prismicio-community/2310-nextjs-13-app-router-tutorial.git

🔗 참고한 튜토리얼: https://prismic.io/blog/nextjs-13-app-directory

저작자표시