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中文网其他相关文章！
