在上一章節裡，我們討論了如何開始使用 React。 這是最終程式碼的樣子。 如果您從這裡開始，請將此程式碼碼複製到程式碼編輯器中的 index.html 文件中。
<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>現在，讓我們看看如何從一個簡單的 React 應用程式遷移到 Next.js。
要將 Next.js 添加到您的專案中，您將不再需要從 unpkg.com 加載 react 和 react-dom 腳本。 相反，您可以使用Node 套件管理器 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 文件，可以刪除以下程式碼：
react 和 react-dom 腳本。<html> 和 <body> 標籤，因為 Next.js 將為您創建這些標籤。app 元素和 ReactDom.render() 方法互動的程式碼。Babel 腳本。因為 Next.js 有編譯器，可以將 JSX 轉換為瀏覽器可以理解的有效 JavaScript。<script type="text/jsx"> 標籤React. React.useState(0) 函式中的一部分。刪除上述行列後，將 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>
);
}HTML 文件中剩下的唯一代碼是 JSX，因此您可以將文件類型從 .html 更改為 .js 或 .jsx。
現在，您還需要做三件事才能完全遷移到 Next.js 應用程式：
index.js 文件移動到一個名為 pages 的新文件夾中（稍後會詳細介紹）。package.json 文件中添加一個腳本，以便在您開發時運作 Next.js 開發服務器。// ...
export default function HomePage() {
// ... // 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 來查看您的應用程序。 然後，對程式碼進行一些小修改並儲存。
儲存文件後，您應該注意到瀏覽器會自動更新以反應更改。
此功能稱為快速刷新。 它為您所做的任何編輯提供即時回饋。
回顧一下，你的程式碼從原先這個樣子…
<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>
{name.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 腳本，體驗到您不再需要考慮的複雜工具配置，您還看到了快速刷新的實際效果，這些只是 Next.js 的眾多開發人員體驗功能之一。
恭喜您創建了您的第一個 Next.js 應用程式！
總而言之，您探索了 React 和 Next.js 的基礎知識，並從簡單的 React 應用程式遷移到了 Next.js 應用程式。
現在，您可以選擇 Next.js 旅程的下一步。 你可以：
在下一課中，我們將通過介紹一些相關的 Web 開發概念來探索 Next.js 的工作原理。 熟悉這些概念將有助於擴展您的基礎並更容易學習更進階的 Next.js 功能。
© Copyrights 從想像到創造. All Rights Reserved.
