NextJs 教程：ReactJS 框架入门

我们都听说过 NextJs——最流行和最灵活的 ReactJS 框架，可以简化您的生产开发。它具有以下优点，有助于更快地创建 Web 应用程序：

• 混合静态和 SSR

• 支持打字稿

• 智能楼宇

• 路由预取

• 无需配置

Next.js 为我们提供了哪些功能？

这些是 Next.js 为我们提供的功能。

• 服务器端渲染

• 自动代码拆分

• 静态导出选项

• 简单的生产构建

NextJS 教程目标

在今天的NextJS 教程中，我们将介绍以下内容：

• 创建 NextJS 应用程序

• 页面和基本路由

创建一个 NextJs 应用程序

# 使用 npx 创建一个新的 Next.js 应用程序npx create-next-app <app-name># 使用 npm 创建一个新的 Next.js 应用程序npm create-next-app <app-name># 带纱线yarn create next-app <应用名称>

在这里，我们使用 yarn 命令来创建我们的 NextJS 应用程序。按照以下命令操作。

纱线创建下一个应用程序下一个项目演示/**
 * 项目名称：下一个项目演示*/

完成命令后，下面将是成功响应。

我们的整个项目都存储在next-project-demo中。文件夹结构请参考下图。

空置率由您决定。

Next.js 用于 10,000 多个面向生产的网站和 Web 应用程序，其中包括许多世界上最大的品牌。需要帮助来加速您的产品开发？

下载

文件夹结构

运行 NextJS 应用程序

使用以下命令运行我们的应用程序只是为了测试它。

cd next-project-demo // 切换文件夹yarn dev //运行next.js项目

您的浏览器看起来像这样。

http://localhost:3000/

然后页面看起来像这样

页面和路由设置

转到NextJs 教程的主要部分。在 Next.js 中，我们可以使用其基于文件的路由来创建多页面应用程序。最好的部分是，不需要安装额外的包或像 react-router-dom 这样的第三方库，甚至根本不需要配置路由器。

所有 Next.js 应用程序都包含默认的 /pages 目录：应用程序的 React 组件的主目录。路由器将根据组件提供页面。

/页面目录

主页

打开索引页并从该文件中删除所有代码，然后使用以下代码配置主页。

函数主页（）{
  返回（<分区>
    <h1>这是我们的主页</h1>
  </div>)}导出默认主页；

运行应用

关于页面

现在，如果我们想添加另一个页面，那么我们将创建一个文件和页面文件夹，并执行与我们为主页所做的相同的操作。

假设我们要创建一个关于页面，只需在页面目录下添加 about.js 文件即可。使用下面的代码。

功能关于页面（）{
    返回（<分区>
        <h1>这是关于页面</h1>
    </div>)}导出默认的关于页面；

现在在浏览器中运行应用程序，如果我们在路由中提到/about，那么应用程序将加载关于页面。

初学者的 NextJs 教程就是这样。在下一个指南中，我们将讨论更多基于文件的路由和与多个页面的链接。

结论

（言鼎科技）专做软件开发,微信小程序,网站开发,软件外包,手机APP开发，欢迎资讯！