文、意如
建立專案
指令:npx create-next-app@latest my-website --typescript
專案結構
啟動伺服器
cd my-website
npm run dev
npm install -g npm@latest
下載最新的 Node.js LTS 或 Current 版本：
官方下載頁：https://nodejs.org/en/download/
建議下載至少 20.x 或更新的版本。
升級後，可以檢查版本：
node -v
npm -v
npm install -g npm@latest
啟動專案
npm run dev
使用瀏覽器開啟 http://localhost:3000
my-website/
├── public/ ← 靜態資源
├── src/ ← 你的原始碼（如果有選 src）
│ ├── pages/ ← 頁面路由（index.tsx 就是首頁）
│ ├── styles/ ← CSS 檔案
│ └── ...
├── .eslintrc.json ← ESLint 設定（語法檢查）
├── next.config.js ← Next.js 設定
├── tsconfig.json ← TypeScript 設定
├── package.json ← 套件清單
└── ...
重點說明：
app/ 目錄 是 Next.js 13 的新路由系統（App Router），它取代了過去的 pages/，並且支援更強大的功能與靜態渲染等優化。
沒有 src/ 目錄，是因為當初建立專案時選擇了不使用 src，所以所有原始碼就直接放根目錄下的 app/ 了。
globals.css 是全站共用 CSS，通常會在 layout.tsx 中引用。
app/layout.tsx：定義網站共用佈局，例如導覽列、Footer。
app/page.tsx：首頁內容。
其他頁面以資料夾方式放在 app/ 裡，如 app/about/page.tsx 對應 /about 頁面。
首頁是由 app/page.tsx
先改成
export default function Home() {
return (
<main style={{padding:'20px',textAlign:'center'}}>
<h1>我的首頁</h1>
<p>自訂</p>
</main>
);
}
測試tailwindcss
page.tsx
export default function Home() {
return (
<main className="min-h-screen bg-white flex items-center justify-center px-4">
<div className="max-w-3xl text-center py-24">
<p className="text-lg sm:text-xl text-gray-600 mb-8">
使用 Next.js + React+TypeScript + Tailwind CSS
</p>
<div className="flex justify-center gap-4 flex-wrap">
<a
href="#"
className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow hover:bg-blue-700 transition"
>
立即開始
</a>
</div>
</div>
</main>
);
}
Yiru@Studio - 關於我 - 意如
