2024-02-27
【Next.js】框架基礎說明
原文發表於 Medium。
「React是個優秀的前端框架。」這句話其實不正確。
Photo by Pixabay: https://www.pexels.com/photo/spiral-staircase-39656/
React嚴格上算是一個library，因為他只有提供功能，但是專案中具體檔案跟檔案之間的相對位置，以及彼此間一些硬性的命名與撰寫規定等等，都無太多規範。所以說他是框架，其實只是方便與vue跟angular並提的說法而已。
但Next.js就不一樣，它真正是一個框架(React的框架)，它讓React可以有更好的功能擴充，在撰寫程式碼時也更有架構。
打開Next.js序幕
npx create-next-app my-first-next-app
//然後一路enter下去。
上方指令會建構一個新的Next.js專案，裡面含有TypeScript、ESLint、Tailwind CSS、src/ 檔案夾、App Router以及import alias 等一整套功能。可以說是非常齊全。
路由系统
大家可以先來看看主資料夾：
這邊的src資料夾非常重要，它是我們大部份工作資料的儲存地，在src下方還有一個app資料夾，我們網頁的頁面資料都放在裡面。：
有句話很主要：app內容中的架構，就是一個網頁的架構 。
app檔案夾的第一層代表主路徑“／”，當一個檔案被命名為page.tsx/jsx時，就代表該檔呈現那個url位置的頁面，因此在預設的http://localhost:3000/開發用本伺服器路徑的頁面，就是/app/page檔。
我們來做個小實驗就可以明白，創立一個news資料夾在app下方，裡面創建一個page檔案：
// src/app/page.tsx
import React from "react";
const News = () => {
return <div>News</div>;
};
export default News;
我們切換到http://localhost:3000/news 時，頁面就會是src/app/page.tsx的檔案。這就是next.js有名的資料夾路由系统，藉由一個個資料夾來做出不同url的所述頁面，這個功能可以幫助我們建立具有巨大規模的網站，例如購物網站。
在一個購物網站中，它不只需要一個主頁，各種不同商品種類就可能各自需要一個網頁來呈現，例如http://billy-shop/shoes跟http://billy-shop/shirt就分別賣鞋、上衣。在Next.js中，只要在src中放入shoes跟shirt兩個有page檔的資料夾，就搞定了，極其方便。
SSR（伺服器端渲染）支援：
Next.js 提供內建的伺服器端渲染支援，可以在伺服器上動態產生網頁，然後將其送到客戶端。這有助於提高 SEO（搜尋引擎優化）和網頁加載性能。
上面這段話對於初學者有點難懂，翻成白話文來說：
CSR客戶端渲染
我們原生版本的React使用的叫做CSR，客戶端渲染。React會把js程式碼等資料送到客戶端，然後在客戶端把網頁架構架好之後，再叫瀏覽器從後端收取細部的資料，如客戶資料，文章資料等。因此第一時間客戶端收到的會是空白的html。
為了要驗證這件事，在原生react專案中打開網頁的原始碼看看
非常乾淨對吧？可以發現網頁中除了一個div，其他都空空如也，這就是CSR帶來的問題。
搜尋引擎在爬尋網路上的網頁時，它依照第一時間到手的html來判斷網頁的內容，因此CSR網頁在搜尋引擎中網頁的關聯性與觸及率就會降低。
SSR伺服器端渲染
Next.js的網頁則是直接把html渲染好再送出給客戶端：
發現html內容豐富很多，除了頁面上的東西外，還多了很多難以閱讀的代碼，但不用擔心搜尋引擎的爬蟲看得懂就好，SEO大大提升！這就是SSR的威力。
以上詳細討論兩個重要的特色給大家參考，其他還有很多優點，我將認為重要的部分列在下方：
- 靜態網站生成 (SSG) ：Next.js 可以將 React 組件預渲染為靜態 HTML 文件。這可以提高性能並降低伺服器成本。
- 自動代碼分割 ：Next.js 可以自動將您的代碼分割為較小的塊，從而提高性能。
- 圖片優化 ：Next.js 可以自動優化您的圖片，從而提高性能。
- 開發人員體驗 ：Next.js 提供了一些功能來改善開發人員體驗，例如熱重載和錯誤檢查。
- API Route：Next.js 提供了後端端點功能，讓網站變成全端的架構。
接下來，我們要來開發的新專案：購物網站，就要倚仗next.js的威力來建構。上面提到的種種特點，往後我們有很多時間可以細部討論。
最後，歡迎大家加入next的行列。我們一起前進！