建立與設定 Next.js App Router
===

:::info
:radio_button: [回到目錄攻略](https://hackmd.io/@hJJ8etrATgudRfKA1gryew/BJiplPwMC)
:::

1.自動下載
---
在Terminal下關鍵指令：

npx create-next-app@latest

接著會看到必要的問題程序，可照各自的需求進行回答：
:::info
√ What is your project named? ... **nextjs-side-project**
√ 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? ... @/*
:::

2.引入路徑寫法設定
---
在```tsconfig.ts```在paths物件裡調整路徑alias

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./*"],
      "@src/*": ["./src/*"],
      "@app/*": ["./src/app/*"],
      "@lib/*": ["./src/lib/*"],
      "@locale/*": ["./src/app/[locale]/*"]
    }   
  }
}

撰寫自己的預設路徑，等於搞了個絕對位置，在引入檔案時便有幾個好處：
- 如果本身檔案被移動了，引入的component也不怕找不到位置。
- 不用一直寫返回路徑```../../../.......```寫到都天荒地老了

參考
---
[NEXT.JS: Installation](https://nextjs.org/docs/getting-started/installation)