폴더 구조

Next.js가 13버전부터 app router로 바뀌었대서 살펴보고 적용해보았다.

• https://nextjs.org/docs/app/building-your-application/routing#the-app-router

짜면서 기억에 남는 부분은

_utils, _components 와 같이 _를 앞에 붙여 폴더를 만들면 하위 구조는 라우터에 포함이 안 되는 것,
(폴더 이름)을 괄호에 넣어 만들면 하위 구조는 라우팅에 포함되지만 (폴더)는 라우터에 포함되지 않는 것,

data fetching 하는 방법이 단순하게 fetch()로 통합된 것,

그리고 모달을 예시로 나온 Parallel Routes가 있다.

• https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
  

최최종..

TODOTASKS/
├── app/
│   ├── _api/
│   │   └── auth/
│   │       ├── callback/
│   │       │   └── oAuthRoutes.ts
│   │       └── confirm/
│   │           └── routes.ts
│   ├── _components/
│   │   ├── auth/
│   │   │   ├── signin/
│   │   │   │   ├── actions.ts
│   │   │   │   └── LoginForm.tsx
│   │   │   ├── signout/
│   │   │   │   └── actions.ts
│   │   │   └── signup/
│   │   │       ├── actions.ts
│   │   │       └── SignupForm.tsx
│   │   └── layout/
│   │       ├── Calendar.tsx
│   │       ├── Todo.tsx
│   │       └── Sidebar.tsx
│   ├── _types/
│   │   ├── modalType.ts
│   │   ├── taskType.ts
│   │   └── userType.ts
│   ├── _utils/
│   │   └── supabase/
│   │       ├── client.ts
│   │       ├── middleware.ts
│   │       └── server.ts
│   ├── (with-layer)
│   │   ├── calendar/
│   │   │   └── page.tsx
│   │   ├── signin/
│   │   │   └── page.tsx
│   │   ├── layout.ts
│   │   └── page.tsx
│   ├── (without-layer)
│   │   ├── [...not_found]/
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   └── not-found.tsx
├── common/
│   ├── Button/
│   │       └── Button.tsx
│   └── Modal/
│       ├── Modal.tsx
│       └── TaskForm.tsx
├── public/
│   ├── icons/ 
│   └── favicon.ico
├── store/
│   ├── useModalState.ts
│   ├── useTaskStore.ts
│   └── useUserStore.ts
├── styles/
│   └── globals.css
├── .env.local
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
└── tsconfig.json .....

전역에서 사용하거나 공통으로 사용할 아이템들은 루트로 빼줬다.

폴더 이름은 소문자, 컴포넌트로 사용할 tsx 파일은 Pascal case로, 이외의 ts 파일들은 Camel case로 적용했다.