📝 Next.js教程
22篇技术文档📅 最后修改于: 2020-10-22 06:42:55 🧑 作者: Mango
Next.js是基于React的框架，具有服务器端渲染功能。它非常快速且对SEO友好。使用Next.js，您可以轻松创建强大的基于React的应用程序并对其进行测试。听众本教程是为希望以简单易用的方式学习Next.js及其概念的软件程序员设计的。本教程将通过适当的示例使您对Next.js的各种功能有足够的了解。先决条件在继续本教程之前，您应该对JavaScript和React有基本的了解。...
📅 最后修改于: 2020-10-22 06:43:14 🧑 作者: Mango
Next.js是基于React的框架，具有服务器端渲染功能。它非常快速且对SEO友好。使用Next.js，您可以轻松创建强大的基于React的应用程序并对其进行测试。以下是Next.js的主要功能。热门代码重新加载-Next.js服务器检测到修改后的文件并自动重新加载它们。自动路由-无需配置任何URL进行路由。文件将放置在页面文件夹中。所有URL将被映射到文件系统。可以定制。特定于组件的样式-st...
📅 最后修改于: 2020-10-22 06:43:36 🧑 作者: Mango
由于Next.js是基于反应的框架，因此我们正在使用Node环境。现在，请确保您已在系统上安装了Node.js和npm。您可以使用以下命令安装Next.js-成功安装Next.js后，您可以观察到以下输出-现在，让我们创建一个节点package.json-创建package.json时选择默认值-现在更新package.json的脚本部分，以包含Next.js命令。创建页面目录。在nextjs文件...
📅 最后修改于: 2020-10-22 06:43:57 🧑 作者: Mango
在Next.js中，我们可以使用文件系统路由功能创建页面并在页面之间导航。我们将使用链接组件在页面之间进行客户端导航。在Next.js中，页面是React组件，并从pages目录导出。每个页面都基于其文件名与路由关联。例如pages / index.js与“ /”路由链接。pages / posts / first.js与“ / posts / first”路线链接，依此类推。让我们更新在“环境设...
📅 最后修改于: 2020-10-22 06:44:22 🧑 作者: Mango
在Next.js中，我们可以通过将静态页面（例如图像）放置在public（顶层目录）中来轻松地为其提供服务。我们可以以类似的方式引用这些文件，例如页面目录中的页面。在Next.js中，页面是React组件，并从pages目录导出。每个页面都基于其文件名与路由关联。让我们更新“页面”一章中使用的nextjs项目。创建公共目录并在其中放置任何图像。我们采取了TutorialsPoint徽标图像logo...
📅 最后修改于: 2020-10-22 06:44:41 🧑 作者: Mango
在Next.js中，我们可以借助内置的<Head>react组件非常轻松地修改每个react页面的head部分。让我们更新“页面”一章中使用的nextjs项目。更新index.js如下-更新first.js如下-在这里，我们在index.js文件中添加了对logo.png的引用。启动Next.js服务器运行以下命令以启动服务器-。验证输出在浏览器中打开localhost：3000，您将看到以下输出...
📅 最后修改于: 2020-10-22 06:45:01 🧑 作者: Mango
在Next.js中，我们可以使用名为styled-jsx的inbuild css-in-js库。它允许在react组件中编写CSS，并且这些样式将限于该组件。在此示例中，我们将创建一个Container对象，该对象将用于通过包含其他组件来设置其他组件的样式。让我们更新“元数据”一章中使用的nextjs项目。首先在根级别创建一个Components目录，并添加文件container.module.c...
📅 最后修改于: 2020-10-22 06:45:19 🧑 作者: Mango
在Next.js中，让我们创建将应用于所有页面的全局样式。在此示例中，我们将创建一个styles.css，它将使用_app.js组件在所有组件上使用。让我们更新“CSS支持”一章中使用的nextjs项目。首先在根级别创建一个styles目录，并添加文件styles.css，如下所示：在页面目录中创建_app.js文件启动Next.js服务器运行以下命令以启动服务器-。验证输出在浏览器中打开loca...
📅 最后修改于: 2020-10-22 06:45:50 🧑 作者: Mango
在Next.js中，我们知道它会为称为预渲染的页面生成HTML。 Next.JS支持两种类型的预渲染。静态生成-此方法在生成时生成HTML页面。每次请求时都会发送此预渲染的HTML。此方法对于营销网站，博客，列出wesites，帮助和文档网站的电子商务产品很有用。服务器端生成-此方法在每个请求上生成HTML页面。当html页面的内容随每个请求而变化时，此方法适用。每页预渲染Next.JS允许为每个...
📅 最后修改于: 2020-10-22 06:46:15 🧑 作者: Mango
Next.js使用基于文件系统的路由器。每当我们将任何页面添加到页面目录时，都可以通过url自动访问。以下是此路由器的规则。索引路由-文件夹中存在的index.js文件映射到目录的根目录。例如-pages / index.js映射到“ /”。pages / posts / index.js映射到“ / posts”。嵌套路由-页面目录中的任何嵌套文件夹结构，因为路由器会自动生成URL。例如-pag...
📅 最后修改于: 2020-10-22 06:46:36 🧑 作者: Mango
在Next.js中，我们可以动态创建路由。在此示例中，我们将动态创建页面及其路由。步骤1.定义[id] .js文件-[id] .js表示动态页面，其中id为相对路径。在pages / post目录中定义此文件。步骤2.定义lib / posts.js-posts.js表示ID和内容。 lib目录将在根目录中创建。[id] .js使用设置路径的getStaticPaths（）方法更新[id] .js...
📅 最后修改于: 2020-10-22 06:46:55 🧑 作者: Mango
到目前为止，在Next.js中，我们正在使用链接反应组件从一个页面导航到另一页面。也有一种编程方式，可以使用路由器组件来达到相同的目的。通常，路由器组件与html标签一起使用。如下更新页面目录中的index.js文件。启动Next.js服务器运行以下命令以启动服务器-。验证输出在浏览器中打开localhost：3000，您将看到以下输出。点击不是链接但可以点击的第一篇文章。...
📅 最后修改于: 2020-10-22 06:47:13 🧑 作者: Mango
在Next.js中，浅层路由是指导航到同一页面，但不调用getServerSideProps，getStaticProps和getInitialProps方法。要进行浅层路由，我们使用浅标志为true的Router。请参见以下示例。如下更新页面目录中的index.js文件。启动Next.js服务器运行以下命令以启动服务器-。验证输出在浏览器中打开localhost：3000，然后单击Reload链...
📅 最后修改于: 2020-10-22 06:47:32 🧑 作者: Mango
API Routes是使用Next.js创建其余API的一种方式。 Next.js映射/ pages / api文件夹中存在的任何文件，并将其视为API端点。 API函数的示例-以下是需要考虑的一些重要点。req-req是http.IncomingMessage的实例，用于从请求中获取数据。res-res是http.ServerResponse的一个实例，用于发送数据作为响应。让我们创建一个示例来...
📅 最后修改于: 2020-10-22 06:47:49 🧑 作者: Mango
Next.JS中的API路由具有内置的中间件，这些中间件有助于解析传入的请求。以下是中间件req.cookies-cookie对象包含请求发送的cookie。默认值为{}。req.query-查询对象包含查询字符串。默认值为{}。req.body-查询对象包含使用“ content-type”解析的请求正文。默认值为空。让我们创建一个示例来演示相同的内容。在此示例中，我们将更新pages / ap...