在安裝 Next.js 到你的專案前,你不再需要透過手動加入 react
與 react-dom
的 script 標籤的方式引入 React 。
取而代之的是,你可以在本地端使用套件管理工具 npm
來安裝這些套件。
在準備開發前,請先新增一個內容為空物件 {}
的 package.json
檔案。
//package.json { }
接著,請在你的終端機中運行 npm install react react-dom next
。
當安裝程序完成後,你可以在 package.json
檔案中,查看專案所有的相依套件資訊:
// package.json { "dependencies": { "next": "^12.1.0", "react": "^17.0.2", "react-dom": "^17.0.2" } }
你也會注意到有個 node_modules
的資料夾,主要存放專案相依項中的套件內容。
回到 index.html
,你可以移除以下提及的程式碼:
npm
安裝 react
與 react-dom
等套件,則可以移除手動引入的 React
與 react-dom script
標籤<html>
與 <body>
。Next.js 預設會提供這兩個標籤app
元素與 ReactDom.render()
連動的相關程式碼Babel
語法。Next.js 的編譯器會自行將 JSX 語法轉換為可供瀏覽器讀取的 JavaScript 語法<script type="text/jsx">
標籤React.useState(0)
函式index.html
頂部添加一行 import { useState } from "react"
。你的程式碼應該會如下所示:// index.html import { useState } from 'react'; function Header({ title }) { return <h1>{title ? title : 'Default title'}</h1>; } function HomePage() { const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']; const [likes, setLikes] = useState(0); function handleClick() { setLikes(likes + 1); } return ( <div> <Header title="Develop. Preview. Ship. 🚀" /> <ul> {names.map((name) => ( <li key={name}>{name}</li> ))} </ul> <button onClick={handleClick}>Like ({likes})</button> </div> ); }
此時在 index.html
中的程式碼均為 JSX 語法,為此你可將 index.html
的檔案類型由 .html 替換為 .js
或 .jsx
。
現在,在完全過渡至 Next.js 前,你還需要執行下列三項工序:
index.js
至 pages
資料夾內(稍後會詳細介紹)// ... export default function HomePage() { // ...
package.json
中增加一組 script,以便在你進行開發同時運行 Next.js 環境伺服器。// package.json { "scripts": { "dev": "next dev" }, // "dependencies": { // "next": "^11.1.0", // "react": "^17.0.2", // "react-dom": "^17.0.2" // } }
你可透過終端機運行 npm run dev
並開啟瀏覽器前往 localhost:3000 以查看應用程式是否正常運作。接下來,你可以針對程式碼試著做些調整並儲存。
當你儲存調整後的程式碼,你應該會發現瀏覽器已自動重新渲染頁面,以反映你在程式碼上的更動,這樣的特色稱為 快速重新整理( Fast Fresh ) 。它會對你在編輯程式碼後提供即時性的回饋,並讓 Next.js 預先針對這些回饋進行配置。
簡單回顧一下,你的程式碼從先前的結構...
<html> <body> <div id="app"></div> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/jsx"> const app = document.getElementById("app") function Header({ title }) { return <h1>{title ? title : "Default title"}</h1> } function HomePage() { const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"] const [likes, setLikes] = React.useState(0) function handleClick() { setLikes(likes + 1) } return ( <div> <Header title="Develop. Preview. Ship. 🚀" /> <ul> {names.map((name) => ( <li key={name}>{name}</li> ))} </ul> <button onClick={handleClick}>Like ({likes})</button> </div> ) } ReactDOM.render(<HomePage />, app) </script> </body> </html>
變為以下的結構...
import { useState } from 'react'; function Header({ title }) { return <h1>{title ? title : 'Default title'}</h1>; } export default function HomePage() { const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']; const [likes, setLikes] = useState(0); function handleClick() { setLikes(likes + 1); } return ( <div> <Header title="Develop. Preview. Ship. 🚀" /> <ul> {names.map((name) => ( <li key={name}>{name}</li> ))} </ul> <button onClick={handleClick}>Like ({likes})</button> </div> ); }
從表面上來看,這些過程只是減少了幾行程式碼,但它確實幫助凸顯了一些事情:React 是一種 函式庫,它提供了構築現代互動式 UI 的 一切基本 事物,但仍需要透過一些工序將你製作的 UI 整合至應用程式中。 看完前面對於程式碼上的變更,你或許已經理解使用 Next.js 的好處。你移除了 Babel Script, 體驗了不再需要多餘思考而配置的複雜工具。你也觀察到了 快速重新整理( Fast Fresh ) 的實際效果,而這些只是 Next.js 在眾多開發者體驗特色中的其中一項。
← 返回上一頁 前往下一頁 →