具备一些基本的React和JavaScript知识，您将一路走来 (With some basic React and JavaScript knowledge, you’ll be on your way)

Next.js is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.

Next.js是Zeit创建JavaScript框架。 它使您可以使用React构建服务器端渲染和静态Web应用程序。 这是建立下一个网站的好工具。 它具有许多强大的功能和优势，可以使Nextjs成为构建下一个Web应用程序的首选。

You don’t need any configuration of webpack or similar to start using Next.js. It comes with its configuration. All you need is to run npm run dev and start building your application ?.

您不需要任何webpack或类似配置即可开始使用Next.js。 它带有其配置。 您所需npm run dev就是运行npm run dev并开始构建您的应用程序？

In this article, we are going to explore the great features and tricks of Next.js, and how to start building your next website with it.

在本文中，我们将探索Next.js的强大功能和技巧，以及如何开始使用它构建下一个网站。

This post assumes that you have some basic knowledge of React and JavaScript.

这篇文章假定您具有React和JavaScript的一些基本知识。

Here are some great websites built with Next.js:

以下是一些使用Next.js构建的出色网站：

• Syntaxt.fm

  语法文件

• npmjs

  npmjs

• material-ui.io

  物质使用者

• expo.io

  博览会

• codemenitor.io

  codemenitor.io

I even used Nextjs to build my personal website saidhayani.me — you can get the source code on GitHub here.

我甚至用Nextjs建立我的个人网站saidhayani.me -你可以得到源代码在GitHub上这里 。

Next.js入门 (Getting starting with Next.js)

To start with Next.js you need to have node.js installed in your machine and that’s all. Next.js is like any other node.js application — you need npm or Yarn to install dependencies.

要开始使用Next.js，您需要在计算机中安装node.js，仅此而已。 Next.js像其他任何node.js应用程序一样-您需要npm或Yarn来安装依赖项。

Let’s get started and create a Next.js project.

让我们开始创建一个Next.js项目。

First, we need to create a folder and give it a name of our choice. I’m gonna name it nextjs-app.

首先，我们需要创建一个文件夹并为其选择一个名称。 我将其命名为nextjs-app 。

You can easily do that with this command line:

您可以使用以下命令行轻松完成此操作：

mkdir nextjs-app

After creating the nextjs-app folder, open it on the terminal. Run npm init to create the package.json file.

创建nextjs-app文件夹后，在终端上将其打开。 运行npm init以创建package.json文件。

Next, we have to install our dependencies.

接下来，我们必须安装我们的依赖项。

Installing Next.js

安装Next.js

• using Yarn, type使用Yarn，输入

yarn add next

• using npm, type:使用npm，输入：

npm i next --save

Then we have to install React because Next.js uses React. The first line below uses Yarn for the installation.

然后我们必须安装React，因为Next.js使用React。 下面的第一行使用Yarn进行安装。

yarn add react react-dom

// with npm

npm i react react-dom --save

After that you have to create two necessary folders: pages and static . Next.js won’t work without them!!

之后，您必须创建两个必要的文件夹： pages和static 。 没有它们，Next.js将无法正常工作！！

mkdir pages static

You must have this structure after running these commands :

运行以下命令后，您必须具有以下结构：

nextjs-app  -pages  -static  -package.json

And then simply you can run npm next dev and then open http://localhost:3000/ in your browser.

然后只需运行npm next dev ，然后在浏览器中打开http://localhost:3000/ 。

The NotFound page will show up because we don't have any page yet!

将显示NotFound页面，因为我们还没有任何页面！

So let’s create a home page and an entry point index.js.

因此，让我们创建一个home和一个入口点index.js 。

touch index.js home.js

And then you can write a normal React component. As I said above, Next.js is for building React applications.

然后，您可以编写一个普通的React组件。 正如我上面所说的，Next.js用于构建React应用程序。

Here is what our home.js looks like:

这是我们的home.js样子：

And here is our index.js file:

这是我们的index.js文件：

Next.js has a live reload feature. All you need to do is just change and save, and Next.js will compile and reload the app automatically for you.

Next.js具有实时重新加载功能。 您所需要做的就是更改并保存，Next.js将为您自动编译并重新加载应用程序。

Note: Next.js is like any other server-side rendering tool we need to define the default page of our application, in our case is index.js.

注意 ：Next.js与其他任何服务器端呈现工具一样，我们需要定义应用程序的默认页面，在本例中为index.js 。

You will see this change in the browser after running npm next dev:

运行npm next dev后，您将在浏览器中看到此更改：

Congratulations! We just created a Next.js app with a few simple steps. These instructions to create a Next.js app are described in the official docs of Next.js .

恭喜你！ 我们只是用几个简单的步骤创建了一个Next.js应用程序。 Next.js的官方文档中介绍了创建Next.js应用程序的这些说明。

我的选择 (My alternative)

I usually don’t use this way. I use the create-next-app CLI instead that will do all this stuff for me in one single line.

我通常不使用这种方式。 我使用create-next-app CLI代替，它将在一行中为我完成所有这些工作。

npx create-next-app my-app

You can check out the documentation here to explore more features.

您可以在此处查看文档以探索更多功能。

为Next.js创建自定义配置 (Create custom configs for Next.js)

Sometimes you might want to add some additional dependencies or packages to your Next.js app.

有时您可能想向Next.js应用程序添加一些其他依赖项或程序包。

Next.js gives you the option to customize your configuration using a next-config.js file.

Next.js使您可以选择使用next-config.js文件来自定义配置。

For example, you might want to add sass support to your app. In this case you have to use the next-sass package and you have to add it to the next-config.js file as in the example below:

例如，您可能想向应用程序添加sass支持。 在这种情况下，您必须使用next-sass软件包， 并且必须将其添加到next-config.js文件中，如下例所示：

First, install next-sass:

首先，安装next-sass ：

yarn add @zeit/next-sass

Then include it inside the next-config.js file:

然后将其包含在next-config.js文件中：

And then you can create write your sass code and import it in your component:

然后，您可以创建编写sass代码并将其导入组件中：

Importing the sass file in our component:

将sass文件导入我们的组件中：

And here is the result:

结果如下：

Wow, wasn’t that super easy to add sass support to out Next.js app?

哇，向Next.js应用程序添加sass支持不是那么容易吗？

At this point, we just covered the installation and configuration part. Now let’s talk about the features of Next.js!

至此，我们仅介绍了安装和配置部分。 现在让我们谈谈Next.js的功能！

特点 (The features)

Next.js comes with a bunch of great features like server-side rendering, routers, and lazy loading.

Next.js具有许多出色的功能，例如服务器端渲染，路由器和延迟加载。

服务器端渲染 (Server-side rendering)

Next.js performs server-side rendering by default. This makes your application optimized for search engines. Also, you can integrate any middleware such as express.js or Hapi.js, and you can run any database such as MongoDB or MySQL.

Next.js默认执行服务器端渲染。 这使您的应用程序针对搜索引擎进行了优化。 另外，您可以集成任何中间件，例如express.js或Hapi.js ，并且可以运行任何数据库，例如MongoDB或MySQL。

Speaking of search engine optimization, Next.js comes with a Head component that allows you to add and make dynamic meta tags. It’s my favorite feature — you can make custom and dynamic meta tags. These make your website able to be indexed by search engines like Google. Here is an example of a Head component :

说到搜索引擎优化，Next.js带有一个Head组件，可让您添加和制作动态元标记。 这是我最喜欢的功能-您可以制作自定义和动态元标记。 这些使您的网站能够被Google等搜索引擎索引。 这是Head组件的示例：

And you can import and use theHead component in any other page:

您可以在任何其他页面中导入和使用Head组件：

Awesome!

太棒了！

Note: With Next.js you don’t need to import React because Next.js does this for you.

注意 ：对于Next.js你不需要导入React，因为Next.js可以实现这个要求。

使用Next.js生成静态网站 (Generating a static website with Next.js)

As well as server-side rendering, you still can compile and export your application as an HTML static website and deploy it on a static website hosting like a GitHub page or netlify. You can learn more how to make a static website with Next.js here in the official docs.

除了服务器端渲染之外，您仍然可以将应用程序编译和导出为HTML静态网站，并将其部署在托管于GitHub页面或netlify的静态网站上。 您可以在官方文档中了解更多如何使用Next.js创建静态网站。

路由器 (Routers)

This is another one of the great features of Next.js. When you use the create-react-app, you usually need to install react-router and create its custom configuration.

这是Next.js的另一个强大功能。 使用create-react-app时 ，通常需要安装react-router并创建其自定义配置。

Next.js comes with its own routers with zero configs. You don’t need any extra configuration of your routers. Just create your page inside the pages folder and Next.js will take care of all routing configuration.

Next.js带有自己的零配置路由器。 您不需要路由器的任何额外配置。 只需在pages文件夹内创建pages ，Next.js将负责所有路由配置。

Let’s go ahead and create a custom navigation to make everything clear!

让我们继续创建自定义导航，以使所有内容变得清晰！

To navigate between pages, Next.js has the Link method to manage the navigation.

要在页面之间导航，Next.js具有Link方法来管理导航。

Let’s create blog.js and contact.js pages:

让我们创建blog.js和contact.js页面：

blog.js

blog.js

And here is the contact.js page:

这是contact.js页面：

And now we must be able to navigate between those pages ?

现在我们必须能够在这些页面之间导航吗？

Wow that so easy and super awesome.

哇，如此简单又超级棒。

延迟加载 (Lazy loading)

Lazy loading makes your application deliver a better user experience. Sometimes the page might take time to load. The user may abandon your app if the loading takes more than 30 seconds.

延迟加载使您的应用程序提供更好的用户体验。 有时页面可能需要一些时间来加载。 如果加载时间超过30秒，则用户可能会放弃您的应用。

The way to avoid this is to use some trick to indicate to the user that the page is loading, for example by displaying a spinner. Lazy loading or code splitting is one of the features that allow you to deal with, and control, slow loading so you only load the necessary code in your page.

避免这种情况的方法是使用一些技巧来指示用户页面正在加载，例如通过显示微调器。 延迟加载或代码拆分是使您能够处理和控制缓慢加载的功能之一，因此仅在页面中加载必要的代码。

Next.js comes with its own code splitting method. It provides us a method, called dynamic, to load our component, as in the example below:

Next.js带有自己的代码拆分方法。 它为我们提供了一种称为dynamic的方法来加载组件，如下例所示：

You can find the source code of these examples on GitHub

您可以在GitHub上找到这些示例的源代码

That’s all. I hope that’s enough and I hope this article gives you a clear idea about Next.js and its features. You can learn more about other features in the official docs.

就这样。 我希望这已经足够，并且希望本文为您提供有关Next.js及其功能的清晰思路。 您可以在官方文档中了解有关其他功能的更多信息。

If you have any other additions to this post you can leave a comment below and if you like this post please hit clap ? and share.

如果您对此帖子有任何其他添加，可以在下面发表评论，如果您喜欢此帖子，请打鼓掌吗？ 和分享。

Discuss on  Twitter?.

在Twitter上讨论？

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — said@devsdata.com.

顺便说一句，我最近与一群强大的软件工程师一起为我的一个移动应用程序工作。 该组织很棒，产品交付速度非常快，比我所合作的其他公司和自由职业者要快得多，我想我可以诚实地推荐他们用于其他项目。 如果您想与我联系，请给我发送电子邮件-said@devsdata.com 。

翻译自: https://www.freecodecamp.org/news/an-introduction-to-next-js-for-everyone-507d2d90ab54/