Next.js 入門簡介：快速建置你的 React 應用

Next.js 是一個基於 React 的前端框架，其主要目的是在 React 應用中提供伺服器端渲染 (SSR)、靜態網站生成 (SSG) 及其他便利功能。這樣的架構有助於提升網站的性能和 SEO 優化。對於新手工程師而言，不需從零開始建構應用，而是利用 Next.js 提供的預設功能來加速開發流程。

要開始使用 Next.js，首先需要安裝 Node.js，然後可以用以下的 npm 命令來初始化新專案：

npx create-next-app my-nextjs-app
cd my-nextjs-app
npm run dev

這樣會在本地端啟動一個開發伺服器，然後在瀏覽器打開 http://localhost:3000 即可預覽你的應用程式。

Next.js 使用文件系統來自動生成路由。放置在 pages 資料夾內的每一個檔案都代表一個路由。例如，pages/index.js 會對應到 / 路徑，而 pages/about.js 則會對應到 /about。這樣的設定讓開發者能夠輕鬆管理應用的路由結構。新增新的頁面只需在 pages 資料夾內創建對應的 JavaScript 文件。

Next.js 的 SSR 功能可以讓網頁在伺服器上渲染並回傳 HTML 給瀏覽器，有助於提升首次加載速度及改善 SEO。要啟用 SSR，只需在頁面組件中使用 getServerSideProps 函數來預先抓取資料：

export async function getServerSideProps() {
  // 從 API 或其他資料源抓取資料
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } }
}

這段程式碼將確保在頁面渲染之前，伺服器會先完成資料抓取。

Next.js 也支援 SSG，允許在建置階段完成頁面的預渲染。這在無需頻繁更新的頁面上特別有效。要實現 SSG，可以使用 getStaticProps：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const data = await res.json();

  return { props: { data } }
}

這個方法會在構建時期被調用，生產靜態文件以減少伺服器負載。

Next.js 支援動態路由，允許在頁面名稱中使用方括號表示動態參數。例如，pages/posts/[id].js 對應於 /posts/1，/posts/2 等路徑。透過 getStaticPaths 函數，可以定義這些動態路由的預渲染頁面：

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: false
  };
}

這樣會指導 Next.js 為每個指定的路徑生成靜態頁面。

Next.js 並不僅限於網頁前端，它還提供 API 路由功能，讓你在應用中輕鬆設置 API 端點。只需在 pages/api 資料夾創建 JavaScript 檔案，即可自動定義 API 路由。例如，pages/api/hello.js 內容如下：

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello World' });
}

透過此功能，開發者能輕鬆管理後端服務與前端集成。

為了在大規模應用中有效管理樣式，Next.js 支援 CSS 模組，讓開發者可以避免命名衝突。透過 .module.css 結束檔案來定義樣式，並在組件中引入：

// 在 styles.module.css 中
.container {
  background-color: #fafafa;
}

// 在 React 組件中
import styles from './styles.module.css';

function MyComponent() {
  return <div className={styles.container}>Hello World</div>;
}

這樣可以確保每個組件的樣式相互獨立，不會干擾其他部分。

Next.js 天生支持 TypeScript，只需在專案中加入一個 tsconfig.json 文件。初始化專案後，安裝必要的 TypeScript 套件：

npm install --save-dev typescript @types/react @types/node

然後將 .js 檔案改為 .tsx，Next.js 就會自動識別並適用 TypeScript 進行型別檢查，這讓大型應用的開發更加安全可靠。

當完成開發後，部署 Next.js 應用已相當簡單。Next.js 支援多種雲服務如 Vercel, Netlify 等作為部署選項。以 Vercel 為例，只需將專案推至 GitHub，然後透過 Vercel 介面進行連接部署即可。

vercel login
vercel

這樣即可透過 Vercel 提供的域名訪問你已部署的應用，並享有其 CDN 加速服務與無縫擴展能力。