app router의 폴더 구조 및 세팅

app router

app router는 기존에 있던 page router의 문제점들을 해결한 새로운 폴더 구조이다. 아직 Next에서 page router를 지원하긴 하지만 신규 기능은 app router에만 적용될 것이다. 그렇기에 장기적으로 보면 app router에 대해 잘 이해할 필요가 있다.

파일 생성

npx create-next-app@lastst

폴더 구조

public

• public 폴더에는 주로 누구나 접근 가능한 사진들을 저장한다.
• 만약 특정한 조건을 가진 사람만 접근이 가능해야 하면 다른 곳에 저장해야 한다.

src/app

• app 폴더 안에는 페이지를 설정하는 파일들이 들어간다.
• 페이지 외에 파일이 필요하면 다른 폴더를 만들어서 작성하면 된다.

-layout.tsx

• layout.tsx는 전체 페이지에 대한 기본 틀을 보여주는 파일이다.
• 다른 페이지에서 다른 layout.tsx를 사용하고 싶으면 그 페이지의 폴더에 layout.tsx를 만들면 된다.
• layout.tsx vs template.tsx
  • layout.tsx는 페이지를 넘나들 때 리렌더링이 안됨
  • template.tsx는 페이지를 넘나들 때 리렌더링이 됨(거의 안 쓰는데 구글 Analytics 같은 거 할 때 사용하라 권장되어 있음)

-not-found.tsx

• 존재하지 않는 경로에 들어가면 이 페이지 파일을 보여준다.

-(afterlogin)

• (afterlogin)은 로그인 이후에 보이는 페이지이다.
• () 소괄호는 주소창에 관여는 안 하지만 그룹화를 할 수 있다.
• [username]은 유저의 마이페이지를 조회하는 페이지이다.
  • 만약 username이 "home"이면 home 폴더의 페이지로 이동한다.
  • 따라서 username은 다른 페이지의 이름이 되지 못하도록 해야 한다.
• layout.tsx가 폴더 안에 있으면 밖에 있는 layout.tsx 대신 이 폴더 안에 있는 layout.tsx를 사용한다.

-(beforelogin)

• (beforelogin)은 로그인 이전에 보이는 페이지이다.
• () 소괄호는 주소창에 관여는 안 하지만 그룹화를 할 수 있다.
• layout.tsx가 폴더 안에 있으면 밖에 있는 layout.tsx 대신 이 폴더 안에 있는 layout.tsx를 사용한다.

-출처

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

Next + React Query로 SNS 서비스 만들기 강의 - 인프런