Please enable JavaScript.
Coggle requires JavaScript to display documents.
前台前端新站台服務 - Coggle Diagram
前台前端新站台服務
待研究議題
api 型別如何有效管理？
automatically generates types based on your database schema
Prisma
Drizzle
css 樣式
css reset
ui/global.css
CMS style 載入
還要用 styled-components 嗎？
使用 tailwind
使用 spark ui
Adidas 客製如何運作
pending
Unit Test
vitest
font
Next.js automatically optimizes fonts in the application when you use the next/font module
image
The <Image> component
DC 大 C 如何套用
Server Componet 的用處？
包含打 api 取得資料的邏輯
Statice Rendering 與 Dynamic Rendering 何時使用？
Static Rendering
Dinamic Rendering
App Router 或 Pages Router
App Router
GTM
server render
多語系如何取得？
幣別切換如何處理？
同現況實作
Server Action 可以用在打 api ?
可以用
error handling
404 not found 可以用 not-found.tsx 實作
form validate 使用 zod 搭配 useActionState
使用 zod
身份驗證
NextAuth.js
Adding the credentials provider
SEO
metadata
Adding Metadata
Config-based
File-based
套件使用
Next.js: 15.5.6
16.0.1
Node: 24.10.0
react and react-dom: 19.2.0
tailwind: ?
clsx: 2.1.1
Using the clsx library to toggle class names
use-debounce: 10.0.6
zod: 4.1.12
eslint: 9.37.0
eslint-config-next: 15.5.6
用 biome 取代？
next-auth: 5.0.0-beta.29
用 better-auth 取代？
next-i18next: 15.4.2
dompurify: 3.3.0
axios: 1.13.1
swr: 2.3.6
目標
轉移 AngularJS 頁面
商品頁
訂單明細頁
轉移 React 頁面
學習資源
Next.js
Start building with Next.js
CSS 套件支援
Image Optimization Docs
Font Optimization Docs
Route Group
Streaming a component
page.js
Dynamic Route
error.tsx
Error Handling
SEO
clsx
Using the clsx library to toggle class names
其他注意項目
Next.js
Next.js uses Server Components by default
Server Components don't support useState
‘use client’ 設定為 client side render
page.tsx 為頁面固定的進入點
colocation
有兩個預設 props: params, searchParams
layout.tsx 會自動套用到目錄下的 page.tsx
loading.tsx 會在 page.ts 未完成 render 前自動顯示
Route Group 可以提供分類用的路徑，不影響 route url
Partial Prerendering
自動分辨 static 或 dynamic 並最佳化 rendering
實驗性功能，未發行
'use server' 設定為 Server Actions
Any functions included in this file that are not used will be automatically removed from the final application bundle.
We recommend having a separate file for your actions.
Server Actions create a POST API endpoint. This is why you don't need to create API endpoints manually when using Server Actions.
revalidatePath
Next.js has a client-side router cache that stores the route segments in the user's browser for a time
clear this cache and trigger a new request to the server
error.tsx 為攔截錯誤用途
一定要在 'use client' Client Component 的情況下
包含未處理的錯誤
notFound 需自行判斷是否進入錯誤處理與 error.tsx 不同
notFound will take precedence over error.tsx, so you can reach out for it when you want to handle more specific errors!