NEXT.js — Ultimate React Framework

最新推荐文章于 2024-08-06 13:00:46 发布

weixin_26738395

最新推荐文章于 2024-08-06 13:00:46 发布

阅读量127

点赞数

原文链接：https://medium.com/byteridge/next-js-the-react-framework-a719626f1e84

版权

Next.js provides a solution to all of the commonly faced problems during development with React.js. But more importantly, it puts you and your team in the pit of success when building React applications.

Next.js提供了使用React.js开发过程中所有常见问题的解决方案。但是更重要的是，它使您和您的团队在构建React应用程序时获得成功。

Next.js has the best-in-class “Developer Experience” and many built-in features;

Next.js具有同类最佳的“开发人员体验”和许多内置功能。

To name a few of them:

仅举几个例子：

An intuitive page-based routing system (with support for dynamic routes)
直观的基于页面的路由系统(支持动态路由)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
每页支持预渲染，静态生成(SSG)和服务器端渲染(SSR)
Automatic code splitting for faster page loads
自动代码拆分可加快页面加载速度
Client-side routing with optimized prefetching
具有优化的预取功能的客户端路由
Built-in CSS and Sass support, and support for any CSS-in-JS library
内置CSS和Sass支持，并支持任何CSS-in-JS库
Development environment which supports Hot Module Replacement
支持热模块更换的开发环境
API routes to build API endpoints with Serverless Functions
API路由使用无服务器功能构建API端点
Fully extendable
完全可扩展

This is among the primary reason why Next.js is used in tens of thousands of production-facing websites and web applications, including many of the world’s largest brands.

这是Next.js被用于成千上万个面向生产的网站和Web应用程序(包括许多世界上最大的品牌)的主要原因之一。

Lets see the NEXT.js in action by setting up a quick app to demonstrate basic along with a few advanced functionalities..

让我们 通过设置一个快速的应用程序来演示基本 的 NEXT.js 以及一些高级功能。

开发环境设置 (Development ENV Setup)

You will need to have Node.js version 10.13 or higher installed on your system to proceed. You can install it from here, in case you don’t have already.
您需要在系统上安装Node.js 10.13或更高版本才能继续。如果尚未安装，可以从这里安装。
VS-Code, or any editor of your choice.
VS-Code ，或您选择的任何编辑器。

创建一个Next.js应用 (Creating a Next.js app)

To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:

要创建Next.js应用程序，请打开您的终端，使用cd进入您要在其中创建应用程序的目录，然后运行以下命令：

npm init next-app nextjs-blog --example "https://github.com/zeit/next-learn-starter/tree/master/learn-starter"

Behind the scene you are instructing npm to initialize a new next app within nextjs-blog folder. This basically uses the tool called create-next-app, which bootstraps a Next.js app for you. It uses this template through the --example flag.If it doesn’t work, please take a look at this page.

在后台，您正在指示npm在nextjs-blog文件夹中初始化一个新的下一个应用程序 。这基本上使用了称为create-next-app的工具，该工具会为您引导Next.js应用程序。它通过--example标志使用此模板。如果不起作用，请查看此页面。

Once this command completes you will see a new folder created with name nextjs-blog.

该命令完成后，您将看到一个名为nextjs-blog的新文件夹。

运行应用 (Running the app)

Let’s cd into your newly created folder by using the following command:

使用以下命令将cd插入新创建的文件夹：

cd nextjs-blog

Then, run the following command:

然后，运行以下命令：

npm run dev

This starts your Next.js app’s “development server” on port 3000. Open http://localhost:3000 from your browser to see it in action.

这将在端口3000上启动Next.js应用程序的“开发服务器”。从浏览器中打开http：// localhost：3000 ，以查看其运行情况。

If everything goes as expected you will see the following screen in your browser:

如果一切正常，您将在浏览器中看到以下屏幕：

The Next.js development server has the Hot Reloading feature. When you make changes to files Next.js automatically applies the changes in the browser. No refresh needed! This will help you iterate on your app quickly.

Next.js开发服务器具有热重载功能。对文件进行更改时，Next.js会自动在浏览器中应用更改。无需刷新！这将帮助您快速迭代应用程序。

创建页面 (Creating Pages)

In Next.js, a page is a React Component exported from a file in the pages directory.

在Next.js中，页面是从pages目录中的文件导出的React组件。

All pages are associated with a route based on their file name by default.

默认情况下，所有页面都基于其文件名与路由关联。

pages/index.js is associated with the / route.
pages/index.js与/路由相关联。
pages/users.js is associated with /users route. Similarly,
pages/users.js与/users路由相关联。同样，
pages/posts/first-post.js is associated with the /posts/first-post route.
pages/posts/first-post.js与/posts/first-post路由相关联。

Go ahead and try adding some by urself and see how it reacts. Once done you can proceed to next section.

继续尝试自己添加一些，看看它如何React。完成后，您可以继续下一部分。

Next.js中的手动路由 (Manual Routing in Next.js)

When linking between pages on websites you generally use the <a> HTML tag.

在网站上的页面之间链接时，通常使用<a> HTML标记。

In Next.js, you use the <Link> React Component that wraps the <a> tag. <Link> allows you to do client-side navigation to a different page in the application.

在Next.js中，您使用包裹<a>标签的<Link> React组件。 <Link>允许您在客户端中导航到应用程序中的其他页面。

Lets see it in action:

让我们来看看它的作用：

First, in pages/index.js, import the Link component from next/link by adding this line at the top:

首先，在pages/index.js ，通过在顶部添加以下行，从next/link导入Link组件：

import Link from 'next/link'

Then modify this line in the h1 tag to look like this:

然后在h1标签中修改此行，使其看起来像这样：

Read <Link href="/posts/first-post"><a>this page!</a></Link>

Considering you have created a first-post.js as suggested above, lets replace the content with the following.

考虑到您已经按照上面的建议创建了first-post.js ，让我们用以下内容替换内容。

import Link from 'next/link'
export default function FirstPost() {
  return (
    <div>
      <h1>First Post</h1>
      <p>Hey there, I am a newly created Post.</p>
      <br/>
      <h2>
        <Link href="/">
          <a>Navigate to home</a>
        </Link>
      </h2>
    </div>
  )
}

As you can see, the Link component is similar to using <a> tags, but instead of <a href="…">, you use <Link href="…"> and put an <a> tag inside.

正如你所看到的， Link组件类似于使用<a>标签，但不是<a href="…"> ，您使用<Link href="…">把一个<a>标签内。

Let’s check to see it works. You now should have a link on each page, allowing you to go back and forth:

让我们检查一下它是否有效。现在，您应该在每个页面上都有一个链接，以允许您来回浏览：

Image for post — navigating between pages

A few quick notes about navigation:

关于导航的一些简短说明：

Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browser.
客户端导航意味着页面过渡使用JavaScript进行 ，这比浏览器执行的默认导航要快。
If you’ve used <a href="…"> instead of <Link href="…"> and did this, the browser does the full refresh. but in our case it’s not the case.
如果你已经使用<a href="…">代替<Link href="…">和这样做，浏览器就会进行完全刷新。但就我们而言并非如此。

If you want to ensure this, use the browser’s developer tools to change the background CSS property of <html> to blue. Click on the links to go back and forth between the two pages. You’ll see that the blue background persists between page transitions. This ensures we are not reloading the page actually.

如果要确保这一点，请使用浏览器的开发人员工具将<html>的background CSS属性更改为blue 。单击链接可在两个页面之间来回切换。您会看到在页面转换之间，蓝色背景仍然存在。这样可以确保我们不会实际重新加载页面。

代码拆分和预取 (Code splitting and prefetching)

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

Next.js会自动进行代码拆分，因此每个页面仅加载该页面所需的内容。这意味着在呈现主页时，最初不会提供其他页面的代码。

This ensures that the homepage loads quickly even if you add hundreds of pages.

这样可以确保即使您添加数百页也可以快速加载主页。

Only loading the code for the page you request also means that pages become isolated. If a certain page throws an error, the rest of the application would still work.

仅加载您请求的页面的代码也意味着页面被隔离。如果某个页面抛出错误，则该应用程序的其余部分仍将正常工作。

Furthermore, in a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant!

此外，在Next.js的生产版本中，只要Link组件出现在浏览器的视口中，Next.js就会在后台自动预取链接页面的代码。当您单击链接时，目标页面的代码将已经在后台加载，并且页面转换将很快完成！

摘要 (Summary)

Next.js automatically optimizes your application for the best performance by code splitting, client-side navigation, and prefetching (in production).

Next.js通过代码拆分，客户端导航和预取(在生产中)自动优化您的应用程序以获得最佳性能。

You create routes as files under pages and use the built-in Link component. No routing libraries are required.

您可以将路由创建为pages下的文件，并使用内置的Link组件。 不需要路由库。

You can learn more about the Link component in the API reference documentation and routing in general in the routing documentation.

您可以在API参考文档中了解有关Link组件的更多信息，而在路由文档中可以大致了解路由的更多信息。

Note: If you need to link to an external page outside the Next.js app, just use an <a> tag without Link.

注意： 如果需要链接到 Next.js应用程序外部的外部页面，只需使用 不带 Link 的 <a> 标记。

If you need to add attributes like, for example, className, add it to the a tag, not to the Link tag.

如果您需要添加属性等，例如， className ，将其添加到 a 标签，而不是到 Link 标签。