NextJS 14 quick start

- using app router
## 프로젝트 생성
### automatic

```
$ npx create-next-app@lastest
```

```
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
```

### maual

```
npm install next@latest react@latest react-dom@latest
```

## App Router
- Pages Router : 14버전 이전의 방식. 기존 프로젝트를 업그레이드 하는 거라면 그대로 쓰면 된다. 
- app 폴더 내에 각 폴더를 생성하면 그것이 페이지가 된다. 
- 각 폴더에는 pages.tsx 파일이 반드시 존재해야한다.
- layout.tsx는 옵션이지만 특정 페이지의 레이아웃을 지정하려면 생성한다. 상위 폴더의 layout.tsx에 overloading 된다.
```
- app
	- layout.tsx
	- pages.tsx
```

- `layout.tsx` 파일을 생성하는 것을 깜박했더라도 `next de`를 실행할 때 자동으로 만들어준다.
- layout은 prop을 children을 사용한다. [공식레퍼런스: using the App Router](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) 

```
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      {children}
    
  )
}
```

- router는 app router 또는 pages router 둘 중 하나만 사용할 것을 권장한다.
## `pages/` 디렉토리에 대하여 (옵션)
-  `pages/`  폴더에 `index.tsx` 파일을 생성하면 `/` (home) url이 보여지는 파일이 된다.
- `_app.tsx` 파일을 생성하면 custom app 파일을 만들수 있다. [공식레퍼런스 : custom App file](https://nextjs.org/docs/pages/building-your-application/routing/custom-app)
## `public` 폴더 (옵션)
- 이미지, 폰트 등의 static assets을 저장하는 폴더이다.

## 프로젝트 구조
### Top-level folder

- 프로젝트 생성할 때 `src/` 폴더를 사용하겠냐는 질문에 yes를 했다면 아래처럼 생성된다. 
	- app : app router 파일들이 위치하는 폴더
	- pages : pages router 파일들이 위치하는 폴더
	- public : static assets

```
- src
	- app
	- pages
- public
```

- 아래는 'No'를 선택했을 때

```
- app
- pages
- public
```

### App Routing conventions (규칙)

다음의 파일명으로 파일을 생성하면 각각의 역할 별로 동작한다.

- `layout.tsx` : Layout
- `page.tsx` : Page
- `loading.tsx` : Loading UI
- `not-found.tsx` : Not found UI
- `error.tsx` : Error UI
- `global-error.tsx` : Global error UI
- `route.ts` : API endpoint
- `template.tsx` : Re-rendered layout
- `default.tsx` : Parallel route fallback page
### Nested Routes
- `folder` : Route segment
- `folder/folder` : Nested route segment
### Dynamic Routes
- `[folder]` : Dynamic route segment
- `[...folder]` : Catch-all route segment
- `[[...folder]]` : Optional catch-all route segment
### Route Groups and Private Folder
- `(folder)` : 라우팅에는 영향을 주지 않는 라우트 그룹
- `_folder` : Opt folder and all child segments out of routing
### Parallel and Intercepted Routes
- `@folder` : Named slot
- `(.)folder` : Intercept same level
- `(..)folder` : Intercept one level above
- `(..)(..)folder` : Intercept two level above
- `(...)folder` : Intercept from root
### Pages routing
(생략)