Next.js

網頁開發一直在不斷演進，每年一月，我都喜歡停下腳步重新評估並觀察這個生態系統。 問題是：2022年初學者應該從哪裡開始學習，才能學到能找到工作的技能呢？ 地圖有變嗎？與去年有不同嗎？ 變革似乎需要很長的時間，但它們可以很微妙，有時候從一年到另一年事情會徹底變化，你甚至都意識不到。 因此，我開始撰寫這篇文章，指導您如何在網頁開發領域中導航。 對於想要跟上生態系統並保持相關性的開發人員來說，這也是很有用的。有什麼新東西你一定要學嗎？ 讓我們開始吧。 先說一下，這是一個高度主觀的路線圖。這不是一個列出了1000種不同技術的路線圖，然後就讓你淚流滿面地愁眉苦臉。 讓我為您挑選最好的技術，相信我，這樣您就可以停止無休止的分析，並繼續前進。 在網頁開發中，我們有3條路線： 前端開發人員 後端開發人員 全棧開發人員 這些角色之間的界線有點模糊。在這篇文章中，我將聚焦於全棧開發人員，這是我最喜歡的專業化領域——在這個領域中，您不需要專攻前端或後端，而是能夠創建出所有展示出來的內容。 積極忽略 首先，讓我們從我們將忽略的內容開始。 在這個路線圖中，我將忽略像UI/UX工程師、可訪問性和其他重要主題這樣更專業的範疇。這些完全是不同的職業，有自己獨特的學習路徑。 您不可能從一開始就假設您需要學習所有東西。 積極排除。 我們將忽略使用Web技術進行移動開發。那是一個完全不同的領域。我們還將忽略一切不屬於網頁開發的趨勢，而是不同類型的開發專業化，比如AI、數據科學、web3等等。 深入研究5個核心技術 我建議深入研究一組核心的5個技術： HTML CSS JavaScript React Next.js 這些5個技術按順序是您需要掌握的5個東西。 您可以用一只手數清楚。 其中3個是基礎。HTML、CSS、JavaScript。您無法避免它們。這些是我們的工具。 HTML定義了內容 CSS定義了我們希望內容呈現的樣子 JavaScript定義了行為 React是我在這裡的首個選擇。 React是一種簡化創建用戶界面的技術。 它以許多不同的方式讓我們的生活更輕鬆。 HTML、CSS和JavaScript沒有其他替代品，但您可以選擇使用其他東西，比如Svelte、Vue、Angular，但我選擇了React。 但是React非常流行，它有一個悠久的歷史和遺產，使它成為事實上的標準。它被使用得如此廣泛，以至於您可以找到一切，每個庫，大量的教程和課程，需要幫助時也不用擔心。 您可以賭一個替代品，但您還可以看看工作市場和React帶來的機會，並選擇它。 現在我們需要最後一個組件。一個網絡應用程序框架。 我們選擇了React，所以我們需要選擇一個與React配合的網絡應用程序框架。 在React和HTML/CSS/JavaScript三者之上，我選擇了Next.js，它可以讓React-based網站和應用程序的服務和前端無縫集成。 所以，我們共同使用的3個核心技術是HTML/CSS/JavaScript，最上面的是非常流行的UI庫React，再加上一個非常流行的框架Next.js。 現在還有更多的東西可以添加到這5個選擇中，但您需要從某個地方開始。 通過這5個選擇，您已經排除了很多其他可能分散注意力、讓您在成為網頁開發者的道路上分心的東西。 讓我再強調一下這個排除。至少在開始時忽略TypeScript。我知道你會一直聽到它，但它對你的旅程並不重要，你可以在未來的任何時候添加它。 JavaScript讓事情變得簡單得多，這對於保持動力至關重要。 從HTML和CSS開始 此時，開始學習並進行實驗。學習HTML，創建網頁。閱讀我的[HTML手冊](https://flaviocopes.com/page/html-handbook/）。多做練習。Codepen是一個很好的工具。 只是不要被“我使用CSS完成了這個”吸引住，有些人用CSS做了一些不可能的事情。我不知道他們是怎麼做到的，這是藝術（如果您喜歡，那很好，但在我們的旅程中不是很有用）。 至於CSS，學習基礎知識。閱讀我的[CSS手冊](https://flaviocopes.com/page/css-handbook/）。並立即開始學習Tailwind，這是一種非常實用且流行的將CSS應用於您的網頁的方法。 CSS可能很復雜，但Tailwind使它變得更簡單。相信我，我從事CSS已有 20 年，使用Tailwind讓我終於能夠在每個項目上都處理好事情。這也是其他很多人的感受。 您應該使用HTML和CSS/Tailwind創建哪些項目呢？嗯，從您的愛好和興趣開始。創建一些隨機的網頁，看看它們在瀏覽器中如何顯示。 創建一個有關狗的網頁，有關足球、橄欖球、棒球的網頁，有關您最喜歡的Netflix系列、最喜歡的音樂家的網頁，等等。重要的是進行實驗。 在HTML和CSS/Tailwind上別太花哨。它們是兔子洞。關於這兩者有很多東西要學。熟悉它們，使用它們來完成任務。 熟悉像VS Code這樣的編輯器，以及終端和Bash shell的基礎知識。學習Git來管理版本。它將為您節省很多時間和麻煩。 添加JavaScript 現在是學習JavaScript的時候了。下載並閱讀我的JavaScript初學者手冊。 HTML和CSS定義了內容和呈現方式，而JavaScript是一門程式語言。 使用JavaScript，我們可以開始玩樂。 基礎知識有點……無聊並且可能會令人困惑，因為有很多理論和新概念。但這是您在網頁開發中最常使用的東西。因此，掌握它是至關重要的。 逐步將JavaScript添加到您的網頁中。 使用JavaScript，您將能夠為您的網頁添加一些互動性。您將探索DOM，這是瀏覽器讓我們與頁面上的元素進行交互的方式。 您將創建您的第一個表單。 在創建第一個表單之後，您將需要將表單數據發送到某個地方。 想像一下，您建立了一個電子報註冊表單。您想要將電子郵件發送到某個地方以便存儲它。...

Next.js或Gatsby？為什麼要選擇它們而不是create-react-app？而你又應該選擇哪一個呢？ create-react-app無法輕鬆地幫助您生成伺服器端渲染的應用程式。它所提供的一切（包括SEO、速度等等），只能由像Next.js和Gatsby這樣的工具提供。 Next.js比Gatsby更適合的時機是什麼？ 它們都可以幫助實現伺服器端渲染，但方式不同。 使用Gatsby的結果是一個靜態網站生成器，沒有伺服器。您可以構建網站，然後將構建過程的結果靜態地部署在Netlify或其他靜態主機網站上。 Next.js提供了一個後端，可以根據請求生成伺服器端渲染的響應，讓您可以創建動態網站，這意味著您將在可以執行Node.js的平台上部署它。 Next.js也可以生成靜態網站，但我不認為這是它的主要用例。 如果我的目標是構建一個靜態網站，我可能很難選擇，也許Gatsby擁有更好的插件生態系統，包括許多特定於博客的插件。 Gatsby還高度依賴於GraphQL，您可能會根據自己的觀點和需求喜歡或不喜歡這一點。

如果我們在 Next.js 的 React 組件中可以避免使用相對路徑來導入，那該有多好呢？ 所以，舉個例子： import Layout from '../../components/layout' 我們可以直接這樣寫： import Layout from 'components/layout' 這是可能的，它被稱為絕對導入。 只需在項目的根目錄添加一個名為 jsconfig.json 的文件，並將其內容設置為： { "compilerOptions": { "baseUrl": "." } } 這就是了，絕對導入就會開始工作。

以下是在 Next.js 中如何在新視窗中開啟連結的方法： <Link href={url}> <a target="_blank">點擊這個連結</a> </Link> 首先，將 a 標籤包裹在 Link 元件中（這是 Next.js 提供的 Link 元件），然後在 a 標籤內部加入 target="_blank" 屬性，就像在純 HTML 中一樣。 href 屬性保留在 Link 元件上，以便與客戶端路由相容。

我想在網站上只有在開發環境中（在我的本地機器上）顯示某些信息，而在部署後的網站上則隱藏掉。 以下是我如何實現的： const isDev = process.env.NODE_ENV === 'development' {isDev && ( <p>僅限於本地</p> )}

我遇到了這個問題，基本上我的組件使用了 useState() hook 來設置一些變量，但在使用路由進行導航時，狀態並沒有被更新。 事實證明，我的自定義 _app.js 代碼，這段代碼是我從教程中複製過來的，只是用於為應用添加全局樣式，其中存在著這段代碼： export default function App({ Component, pageProps }) { return <Component {...pageProps} /> } 我將其更改為： import { useRouter } from 'next/router' export default function App({ Component, pageProps }) { const router = useRouter() return <Component {...pageProps} key={router.asPath} /> } 這樣做後，它又按預期工作了。 我只需將路徑作為 key 添加即可。

如何自訂 Next.js 應用程式的 head 標籤 從任何 Next.js 頁面元件中，您都可以向頁面標頭添加資訊。 這在以下情況下很方便： 您想要自訂頁面標題 您想要更改元標籤 您該如何做呢？ 在每個元件內部，您可以從 ’next/head’ 中 import ‘Head’ 元件，並將其包含在您的元件 JSX 輸出中： import Head from 'next/head' const House = props => ( <div> <Head> <title>頁面標題</title> </Head> {/\* 其餘的 JSX 內容 \*/} </div> ) export default House 您可以添加任何您希望出現在頁面 <head> 區塊內的 HTML 標籤。 在掛載元件時，Next.js 會確保將 Head 內的標籤添加到頁面的標頭中。在卸載元件時，Next.js 會處理刪除這些標籤。

如何編寫僅在前端或後端其中一方執行的程式碼 在您的頁面組件中，您可以通過檢查window屬性來僅在伺服器端或客戶端執行程式碼。 該屬性僅在瀏覽器中存在，因此您可以進行檢查： if (typeof window === 'undefined') { } 並將伺服器端程式碼放入該區塊中。 同樣地，您可以通過檢查進行僅客戶端程式碼的執行： if (typeof window !== 'undefined') { } JS提示：我們在這裡使用typeof運算符，因為我們無法以其他方式檢測到一個值是否未定義。我們不能做if (window === undefined)，因為這樣會得到一個“window is not defined”的運行時錯誤 作為構建時間優化，Next.js還會從bundles中刪除使用這些檢查的程式碼。客戶端bundle將不會包含包裹在if (typeof window === 'undefined') {}區塊中的內容。

在進行Next.js變數的一些清理工作時，我遇到了這個奇怪的問題： Module not found: Error: Can't resolve 'net' 你可能會遇到類似的錯誤，提示缺少了一個核心的Node.js模組。 請勿執行npm install net或其他類似的操作。如果你已經嘗試過，請執行npm uninstall刪除這些模組。 問題的原因是：Next.js嘗試在前端運行後端代碼。 在我的案例中，是由於使用了DOMPurify庫。我在組件內部使用它，但實際上我應該在getStaticProps()方法中使用它。 這個方法在構建時在Node環境運行，而該庫剛好需要在該環境下運行。

Next.js如何將你的應用程序代碼分成不同的捆綁包，以及它們包含了什麼。 當你查看Next.js應用程序的頁面源碼時，你會看到一堆JavaScript文件正在被加載。 讓我們首先將代碼放入一個HTML格式化器中，這樣我們人類可以更好地理解它。 <!DOCTYPE html> <html> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> <meta name="next-head-count" content="2" /> <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/main.js?ts=1572863116051" as="script" /> </head> <body> <div id="__next"> <div> <h1>Home page</h1></div> </div> <script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script> <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true}</script> <script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script> <script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script> <script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script> <script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script> </body> </html> 我們有4個JavaScript文件被聲明在head中進行預加載，使用rel="preload" as="script"： /_next/static/development/pages/index.js（96行代碼） /_next/static/development/pages/_app....