Next.js 是一種流行的 React 框架，使開發人員能夠創建快速的伺服器渲染應用程式。它提供了強大的開箱即用功能，例如靜態網站產生 (SSG)、伺服器端渲染 (SSR) 和 API 路由。在本指南中，我們將逐步介紹建立您的第一個 Next.js 應用程式的過程，重點關注關鍵概念和實際範例。
要開始使用 Next.js，您需要在電腦上安裝 Node.js。設定 Node.js 後，您可以使用以下命令建立新的 Next.js 應用程式：
npx create-next-app my-next-app
此命令建立一個名為 my-next-app 的新目錄，其中包含啟動 Next.js 應用程式所需的所有檔案和相依性。
建立專案後，導覽至專案目錄：
cd my-next-app
在 my-next-app 目錄中，您會發現類似以下的結構：
my-next-app/ ├── node_modules/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js ├── public/ ├── styles/ │ ├── Home.module.css ├── package.json └── README.md
pages 目錄是您建立應用程式頁面的位置，而 public 用於靜態資源。
Next.js 使用基於檔案的路由系統。要建立新頁面，只需在頁面目錄中新增新的 JavaScript 檔案即可。例如，建立一個名為 about.js 的檔案：
// pages/about.js
import Link from 'next/link';
export default function About() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page of my first Next.js application!</p>
<Link href="/">Go back home</Link>
</div>
);
}
在此範例中，我們建立了一個簡單的「關於」頁面，並使用「連結」元件導覽回主頁。
開啟pages目錄下的index.js檔。該文件代表您的應用程式的主頁。您可以如下修改：
// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<p>
This is my first application built with Next.js.{' '}
<Link href="/about">Learn more about me</Link>
</p>
</div>
);
}
在這裡，我們添加了一些簡單的樣式和「關於」頁面的連結。
Next.js 支援開箱即用的 CSS 模組。若要設定組件的樣式，您可以在 styles 目錄中建立 CSS 模組。例如，建立一個名為 Home.module.css 的檔案：
/* styles/Home.module.css */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
接下來，將此 CSS 模組匯入到您的 index.js 頁面中，如上一節所示。
Next.js 可以輕鬆地使用 getStaticProps 進行靜態網站產生或使用 getServerSideProps 進行伺服器端渲染來取得資料。例如，要取得主頁上的數據，可以這樣修改index.js：
// pages/index.js
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
return {
props: { posts },
};
}
export default function Home({ posts }) {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
在此程式碼中，我們從公開 API 取得貼文清單並將其顯示在主頁上。
Next.js 讓您在pages/api 目錄中建立API 路由。這些路由可用於建立您的後端功能。例如，在pages/api目錄下建立一個名為hello.js的檔案：
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from Next.js API!' });
}
您可以透過導覽至 http://localhost:3000/api/hello 來存取此 API 路由。
應用程式準備就緒後，您就可以輕鬆部署它。 Vercel 是推薦的 Next.js 應用程式託管平台。您可以按照以下步驟部署您的應用程式：
如果您沒有 Vercel 帳戶，請建立一個。
全域安裝 Vercel CLI：
npx create-next-app my-next-app
在專案目錄中執行以下命令：
cd my-next-app
按照提示部署您的應用程式。
Next.js 支援使用括號的動態路由。例如，如果你想要建立一個動態部落格文章頁面，你可以在pages/posts目錄下建立一個名為[id].js的檔案：
my-next-app/ ├── node_modules/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js ├── public/ ├── styles/ │ ├── Home.module.css ├── package.json └── README.md
您現在可以透過導航到 /posts/1、/posts/2 等來存取特定貼文。
如果您想將全域樣式應用到您的應用程序，可以透過在頁面目錄中建立一個名為 _app.js 的檔案來實現：
// pages/about.js
import Link from 'next/link';
export default function About() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page of my first Next.js application!</p>
<Link href="/">Go back home</Link>
</div>
);
}
接下來，在 styles 目錄中建立一個 globals.css 檔案並新增全域樣式：
// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<p>
This is my first application built with Next.js.{' '}
<Link href="/about">Learn more about me</Link>
</p>
</div>
);
}
Next.js 支援環境變數來儲存敏感資訊。您可以在專案的根目錄中建立一個 .env.local 檔案並新增變數：
/* styles/Home.module.css */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
然後您可以使用 process.env 在應用程式中存取此變數：
// pages/index.js
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
return {
props: { posts },
};
}
export default function Home({ posts }) {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
恭喜建立您的第一個 Next.js 應用程式！在整個旅程中，您學習如何設定專案、建立動態頁面、無縫取得資料、實現強大的路由以及輕鬆部署應用程式。
Next.js 不只是一個框架；它是一個框架。它是一個強大的工具，可以顯著增強您的 Web 開發體驗。其內建功能，如靜態網站生成 (SSG) 和伺服器端渲染 (SSR)，使您能夠創建快速、用戶友好的應用程序，並針對效能和 SEO 進行了最佳化。
現在您已經成功建立了您的第一個 Next.js 應用程序，是時候將您的技能提升到一個新的水平了。在即將發布的帖子系列中，我們將深入研究 Next.js 的一些更高級的功能，這些功能可以增強您的應用程式並簡化您的開發流程。
中間件是一項強大的功能，可讓您在請求完成之前透過新增自訂邏輯來擴充應用程式的功能。這意味著您可以操縱請求和回應物件、對使用者進行身份驗證，甚至無縫管理重新導向。
接下來，我們將探索靜態網站產生（SSG）。該技術在建立時預先渲染頁面，從而實現快速加載並提高 SEO 效能。透過了解如何利用 SSG，您可以建立不僅動態而且高效的應用程式。
最後，我們將介紹API 路由，該功能可讓您直接在 Next.js 應用程式中建立無伺服器函數。這意味著您無需單獨的伺服器即可處理請求和回應，從而更輕鬆地以更少的開銷開發全端應用程式。
跟隨我，我們踏上了探索 Next.js 高級功能的激動人心的旅程。有了這些工具，您將能夠建立真正脫穎而出的強大、高效能的應用程式。請繼續關注我們的下一篇文章！
您也可以在以下位置閱讀這篇文章：
Next.js 是一種流行的 React 框架，使開發人員能夠創建快速的伺服器渲染應用程式。它提供了開箱即用的強大功能！
salmaniyad.hashnode.dev
找到我：
薩爾曼·伊亞德 · GitHub
電腦系統工程師|網路開發人員。 SalmanIyad 有 31 個可用的儲存庫。在 GitHub 上關注他們的程式碼。
github.com
以上是Next.js 簡介：建立您的第一個應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
