# Automatic Installation
- 我們建議使用 create-next-app 開始一個新的 Next.js 應用，它會自動為你設置所有內容。
- 要建立專案，請執行以下指令：
Terminal:npx create-next-app@latest
- 安裝過程中，你會看到以下提示：
Terminal: - 專案名稱是什麼？
my-app - 是否使用 TypeScript？
No / Yes - 是否使用 ESLint？
No / Yes - 是否使用 Tailwind CSS？
No / Yes - 是否使用
src/目錄？No / Yes - 是否使用 App Router？（建議使用）
No / Yes - 是否自訂預設的匯入別名（@/*）？
No / Yes - 你想要設定的匯入別名是什麼？
@/*
- 專案名稱是什麼？
- 回答提示後，create-next-app 會建立一個以你的專案名稱命名的資料夾，並安裝所需的相依項。
- 如果你是 Next.js 的新手，請查看專案結構文件，了解應用程式中所有可能的檔案和資料夾。
- 注意事項：
- Next.js 現在預設支援 TypeScript、ESLint 和 Tailwind CSS 配置。
- 你可以選擇在專案的根目錄中使用
src目錄，以將應用程式的程式碼與配置檔案分開。
# Manual Installation
- 手動創建一個新的 Next.js 應用時，安裝所需的套件：
Terminal:npm install next@latest react@latest react-dom@latest
- 開啟
package.json檔案，並新增以下 scripts：
package.json:{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
} - 這些 scripts 指的是應用程式開發的不同階段：
dev: 執行next dev，以開發模式啟動 Next.js。build: 執行next build，以生產環境建構應用程式。start: 執行next start，啟動 Next.js 生產伺服器。lint: 執行next lint，設置 Next.js 內建的 ESLint 配置。
- 建立目錄：
- Next.js 使用檔案系統路由，應用程式中的路由由檔案結構決定。
app目錄：- 對於新應用程式，建議使用 App Router。此路由允許使用 React 的最新功能，是基於社群回饋的 Pages Router 演進版本。
- 建立
app/資料夾，然後新增layout.tsx和page.tsx檔案，這些檔案會在使用者訪問應用程式的根目錄（/）時渲染。
- App 資料夾結構：
- 在
app/layout.tsx裡創建根佈局，包含必需的<html>和<body>標籤：export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
} - 在
app/page.tsx裡創建首頁，並加入一些初始內容：export default function Page() {
return <h1>Hello, Next.js!</h1>
} - 注意事項：如果你忘記建立
layout.tsx，當你執行next dev開發伺服器時，Next.js 會自動創建這個檔案。
- 在
pages目錄（選擇性）：- 如果你更喜歡使用 Pages Router，可以在專案根目錄創建
pages/資料夾。 - 在
pages/資料夾中新增index.tsx，這會是你的首頁（/）：export default function Page() {
return <h1>Hello, Next.js!</h1>
} - 在
pages/資料夾中新增_app.tsx檔案，用來定義全域佈局：import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
} - 在
pages/資料夾中新增_document.tsx檔案，用來控制伺服器的初始回應：import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
- 如果你更喜歡使用 Pages Router，可以在專案根目錄創建
- 注意事項：
- 雖然你可以在同一專案中同時使用兩種路由，但
app目錄中的路由優先於pages。我們建議在新專案中只使用一種路由，以避免混淆。
- 雖然你可以在同一專案中同時使用兩種路由，但
public目錄（選擇性）：- 建立
public資料夾來存放靜態資源，如圖片、字型等。檔案可以從基底 URL（/）開始在程式碼中引用。
- 建立
# Run the Development Server
- 執行
npm run dev來啟動開發伺服器。 - 造訪
http://localhost:3000來查看你的應用程式。 - 編輯
app/page.tsx（或pages/index.tsx）檔案，並儲存以在瀏覽器中查看更新後的結果。
