Web 技術

Next.js 是什麼？給新手的入門指南教學

發佈日期: 作者:
next.js

Next.js是一個基於React的框架，可以用於建立服務端渲染和靜態網站。它提供了一種簡單的方法來構建高效能的React應用程式，並且為開發者提供了許多開箱即用的功能。這篇文章將會帶領您了解Next.js的基本概念、設定步驟、核心功能以及如何開始使用Next.js建立你的第一個應用程式。

Next.js是什麼？

Next.js是一個基於React，Node.js的開源JavaScript框架，用於開發渲染優化的Web應用程式。它可以支持三種不同的渲染方法：靜態網頁生成（Static Site Generation，SSG）、增量靜態生成（Incremental Static Regeneration，ISR）和服務器端渲染（Server-Side Rendering，SSR）。

為何選擇Next.js？

Next.js 提供了開發者想要的一切：開箱即用的路由系統、自動靜態優化、服務器端渲染、靜態網站生成，還有 API 路由，以及與Vercel的完美集成。而且，Next.js還支援TypeScript，你可以利用TypeScript建立強型別的應用程式，進一步提升你的開發效率。

Typescript基本指南：與Javascript的區別與特性

Next.js 的主要功能

Next.js是一個基於React的開源JavaScript框架，它有許多優秀的特性和工具，主要包括以下幾點：

  1. 預渲染（Pre-rendering）： Next.js 支援兩種形式的預渲染，包括靜態生成（Static Generation）和伺服器端渲染（Server-side Rendering）。靜態生成是在每次請求之前，生成HTML文件的過程。伺服器端渲染則是在每次請求時生成HTML文件。Next.js 允許你在同一個應用程式中混合使用這兩種渲染方法。
  2. 路由系統（Routing System）： Next.js 提供了一個內建的路由系統。只要在 pages 目錄下建立一個 .js、.jsx、.ts、或者 .tsx 文件，Next.js 就會自動為該文件提供一個路由。
  3. API路由（API Routes）： Next.js 支援API路由，使你能在 pages/api 目錄下建立API的 endpoint。
  4. 熱模組替換（Hot Module Replacement）： Next.js 預設支援熱模組替換，讓你在開發過程中保存修改後，應用程式能自動更新並保留當前的應用狀態。
  5. 內建的 CSS 和 Sass 支援： Next.js 預設支援 CSS 和 Sass，並支援 CSS Modules。
  6. TypeScript 支援： Next.js 預設支援 TypeScript，使你能使用 TypeScript 來撰寫你的 Next.js 應用程式。
  7. 圖片優化（Image Optimization）： Next.js 提供了一個 next/image 組件，對圖片進行自動優化，包括延遲載入、緩存等。
  8. 環境變數支援： Next.js 允許你在應用程式中使用 .env 文件來設置環境變數。

這些特性讓Next.js能適應各種複雜的開發需求，並使得開發過程更加便利和高效。

16 週前/後端網頁工程師實戰 JavaScript 全端開發課程

Next.js入門教學

在開始使用Next.js之前，你需要在你的機器上安裝Node.js和npm。然後，你可以使用Create Next App來快速地建立一個新的Next.js應用程式：

建立新的Next.js應用程式： 我們先使用 Create Next App 來建立新的Next.js應用程式。打開終端機並輸入以下指令：

npx create-next-app@latest my-blog

在這裡，my-blog是你的應用程式的名稱。

啟動開發伺服器： 建立完成後，進入你的應用程式的目錄，並啟動開發伺服器：

cd my-blog
npm run dev

現在，你就可以在瀏覽器中打開http://localhost:3000，看到你的Next.js應用程式了。

建立新的頁面： 在Next.js中，每個檔案在/pages目錄下都對應到一個路由。例如，你可以在/pages目錄下創建一個about.js檔案來創建一個新的/about路由。在about.js中，你可以這樣寫一個簡單的React組件：

function About() {
    return <div>About</div>;
}

export default About;

儲存後，你可以在瀏覽器中打開http://localhost:3000/about，看到你的新頁面了。

使用內建的API路由： Next.js允許你在/pages/api目錄下創建服務器端的API路由。例如，你可以在/pages/api目錄下創建一個posts.js檔案來創建一個新的/api/posts路由。在posts.js中，你可以這樣寫一個API路由：

export default (req, res) => {
    res.status(200).json({ posts: [] });
}

儲存後，你可以在瀏覽器中打開http://localhost:3000/api/posts，看到你的API路由了。這對於創建RESTful API或與外部API交互非常方便。

資料取得與頁面渲染： Next.js有內建的方法如getStaticProps和getServerSideProps，用於在伺服器端取得資料並將資料傳入你的頁面。以下面的代碼為例，getServerSideProps將在每次請求時運行，並返回一個物件，該物件的props鍵將被傳遞給你的頁面。

export async function getServerSideProps(context) {
    // 在這裡取得資料
    const res = await fetch(`http://localhost:3000/api/posts`);
    const data = await res.json();

    return {
        props: { posts: data.posts },
    };
}

在這個例子中，getServerSideProps從/api/posts路由取得資料，並將資料傳遞給你的頁面。然後，你可以在你的頁面中使用這些資料：

function Posts({ posts }) {
    return (
        <div>
            {posts.map((post) => (
                <div>{post.title}</div>
            ))}
        </div>
    );
}

export default Posts;

在這裡，你的頁面接收一個posts的props，並使用它來顯示每一個文章的標題。

這就是一個基本的Next.js入門教學。我們建議你進一步學習Next.js的其他功能，如使用外部API，建立動態路由，優化靜態內容等等。

Next.js 的學習資源

Next.js有許多豐富的學習資源，無論你是初學者還是已有一定基礎，都能找到適合自己的學習資源。以下是一些推薦的學習資源：

  1. Next.js官方文件： Next.js官方文件是學習Next.js的最好資源，其中包括了詳細的指南和API參考。文件的內容涵蓋了所有Next.js的基本特性，並且常常更新。如果你是第一次接觸Next.js，可以從官方文件的中文版入門指南開始學習。
  2. Next.js的GitHub範例： Next.js在其GitHub倉庫中提供了許多範例應用程式。這些範例覆蓋了許多Next.js的使用情境，如使用外部API，與CMS集成，實現靜態生成等等。

Next.js 是一個強大的框架，能夠幫助你快速地開發高效能的React應用程式。從開箱即用的功能到強大的優化，Next.js 都提供了開發者所需要的一切。

3分鐘小測驗，找到自己學習全端開發的入口