Next.JS超簡易介紹入門

嘿!各位前端開發的朋友們好啊~相信大家都對React框架再熟悉不過了，今天我們就來認識一下最夯的React前端框架-Next.JS!用簡單的比喻說，Next.JS就像是穿在React身上的超級英雄戰袍，給了React額外的超能力，讓你的網頁開發事半功倍!是不是聽起來很酷?繼續看下去，就能Get到Next.JS的超級能力有哪些了!

Next.JS是什麼?

Next.JS是一個基於React的前端框架，由Zeit公司開發。它的目標是通過server-side rendering(簡稱SSR)和靜態化站點(Static Site Generation)，來解決傳統React應用在效能和SEO等方面的問題。簡單來說，Next.JS讓你的網站不只擁有SPA的互動體驗，更能獲得優秀的載入速度與搜尋引擎的友好性。

Next.JS的核心功能有:

📃 檔案式路由系統
⚡ 自動代碼分割
🚀 靜態匯出(Static Exporting)
🖼 支援影像優化
⌛ 增量式靜態再產生(Incremental Static Regeneration)
💻 Server-side rendering
😎 完整支援React生態系

聽起來很複雜吧?別擔心，我們馬上就用簡單的例子解釋它們!

檔案即路由的設計

在Next.JS裡，你只需要在pages資料夾新增一個js檔案，它就會自動在瀏覽器中渲染對應的路由。舉例來說:

- pages/
    - index.js    → https://yourwebsite.com/
    - about.js    → https://yourwebsite.com/about
    - blog/
        - index.js   → https://yourwebsite.com/blog
        - first-post.js → https://yourwebsite.com/blog/first-post

是不是超級簡單?不用額外設定路由器，專注撰寫元件就可以囉!

自動代碼分割與預取

還記得React應用常被人詬病的緩慢載入速度嗎?這是因為在傳統SPA中，所有的JS檔案都需要在一開始就下載完畢。但Next.JS內建了自動代碼分割功能，可確保每個路由只會載入所需的程式碼，大幅提升載入速度!

更猛的是，Next.JS會自動預取鄰近連結所需的JS檔案，讓你點擊新路由時幾乎沒有等待時間!假設首次載入耗時504ms，但路由切換只需17ms就完成了!讓你的網頁如行雲流水般暢快無阻。

靜態匯出與預渲染

很多朋友對Next.JS最感興趣的，應該就是它內建的SSR(服務端渲染)和靜態網站生成(Static Site Generation)功能了吧!

在Next.JS裡，預設所有頁面都會使用Server-side rendering，也就是在伺服器上先渲染好HTML，再傳給瀏覽器。這不僅對SEO更友善，載入初始頁面也會飛快無比!

此外，Next.JS還支援將整個網站匯出為純靜態HTML檔案。你只需在建置時執行next export指令，系統就會自動將所有路由都預先渲染成靜態檔案，gecenu再簡單!

對於動態內容很多的網站(如:部落格或電商網站)，Next.JS也不用擔心。它提供了getStaticPropsAPI，讓你可以在建置期間即時拉取遠端資料，並把資料內嵌在靜態頁面中。對於非常頻繁更新的頁面，也能藉由Incremental Static Regeneration來動態渲染並快取結果，發揮SSR與SSG的最佳效能!

生態系統和影像優化

Next.JS是基於React生態系所設計，因此可與現有的React應用完美兼容，熟悉React者無需額外學習成本。你可以毫無違和感地使用所有React函式庫和概念，如Context API、Hooks等。

當然，Next.JS也為React生態系做出了新的貢獻。其中一個就是Next.JS 13版本提供的app目錄，讓你以全新的方式架構React應用。還有一個讓人相當驚艷的功能，就是Next.JS內建的影像優化功能了。你只需把影像丟到public資料夾，Next.JS就會自動進行優化，產生不同尺寸、格式的縮圖並提供延遲載入，大幅提升網頁載入體驗!

總結

以上就是我介紹Next.JS的一些基本功能了。是不是比你想像中簡單呢?底下我也列了一個快速入門的教學，有興趣的讀者可以立刻動手操作看看:

Next.JS快速入門

安裝Node.js - 從官網下載並安裝最新版本的Node.js。
建立專案

npx create-next-app@latest myapp

啟動開發伺服器

cd myapp 
npm run dev

開始編輯 - 編輯pages/index.js內的React組件，儲存後即可在瀏覽器看到新的內容。
新增頁面 - 在pages資料夾新增一個about.js檔案，內容如下:

export default function About() {
  return <h1>About Page</h1>
}

現在訪問http://localhost:3000/about就能看到新的About頁面了!

新增路由 - 在pages資料夾中新增一個blog子資料夾，並在裡面新增index.js檔案，內容如下:

export default function Blog() {
  return (
    <div>
      <h1>Blog Homepage</h1>
      <p>Articles go here...</p>
    </div>
  )
}

現在訪問http://localhost:3000/blog就能看到Blog首頁了。

添加樣式 - 直接在元件裡使用style jsx語法來添加樣式，例如:

export default function Home() {
  return (
    <div>
      <h1 style={{color: 'red'}}>Hello World!</h1>
      <style jsx>{`
        h1 {
          font-size: 3rem; 
        }
      `}</style>
    </div>
  )
}

添加導航 - 使用Next.js提供的Link元件來添加導航連結:

import Link from 'next/link'

export default function Home() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  )
}

部署上線 - 建置正式環境靜態檔案:

npm run build
npm run start

這樣就可以在http://localhost:3000看到打包好的正式網站了!

接下來就可以將out資料夾部署到任何一個靜態網站託管服務上啦!

以上就是Next.JS的超簡單入門教學。相信你已經初步感受到Next.JS的威力了!它簡單卻強大的功能，幫助你輕鬆打造出高效能、SEO友善的React應用。快進入Next.JS官網開始你的Next之旅吧!

Next.JS超簡易介紹入門#

Next.JS是什麼?#

檔案即路由的設計#

自動代碼分割與預取#

靜態匯出與預渲染#

生態系統和影像優化#

總結#

Next.JS快速入門#