Next.js——你下一个首选框架

Next.js 是由Vercel开发的 React 框架，它将常见的冗余任务（例如路由）抽象成相对简单且强大的 API，从而简化 React 开发人员的工作。这样，您就可以专注于编写应用程序，而无需重复造轮子。

Next.js是一个轻量级的开源 JavaScript 框架，基于 React 库构建，能够实现快速的服务端渲染，并且与服务器无关（即既可以搭配其内置的 HTTP 服务器使用，也可以搭配任何 Node.js 服务器使用）。它由 Zeit 公司开发。路由由页面直接处理，使得网站的快速搭建变得轻松便捷。事实上，我们只需 5 分钟甚至更短的时间就能完成。

为什么选择 Next.js？

1）相对容易学习

就是这样。如果你写过任何 React 项目，你会发现 Next.js 用起来非常顺手。它提供了高级工具和强大的 API 支持，但并不强制你使用它们。

2) 内置 CSS 支持

在组件驱动框架中编写 CSS 时，对“层叠”样式有着不可或缺的需求。这就是为什么会有 CSS-in-JS 工具的原因，但 Next.js 开箱即用，自带 styled-jsx，并且还支持多种样式方法。

3) 自动 TypeScript 支持

如果你喜欢用 TypeScript 编写代码，那么 Next.js 可以为你提供 TypeScript 配置和编译的自动支持。

4）多种数据获取技术

它支持 SSG 和/或 SSR。您可以选择使用其中一种，或者两者都使用。

5）文件系统路由

应用程序的文件系统支持页面间的导航，无需任何特殊的库来处理路由。

安装

我们将使用 NPM 安装 Next.js 及其依赖项。

首先，我们将创建一个目录来存放我们的 Next.js 项目，然后进入该目录：

mkdir my-portfolio-site
cd my-portfolio-site

然后我们将使用package.json文件初始化它，并使用y标志直接执行并跳过问题：npm init -y .

现在我们准备安装 Next.js：

npm install react react-dom next

Next.js 对项目结构并没有太多限制，只有一个例外。所有实际的网页都需要放在pages文件夹中，所以我们来创建它：mkdir pages。

最后，我们来更新package.json文件，添加运行脚本语言以初始化我们的 Next.js 应用。打开package.json文件，在scripts下添加以下内容：

"dev": "next",
"build": "next build",
"start": "next start"

太好了，我们已经安装好了 Next.js。那么让我们开始吧。

创建第一个组件

请记住，Next.js 本质上就是 JavaScript，它基于 React，所以我们只需要构建一些组件即可。路由是通过组件名称来实现的，例如，mysite.com/ blog 的路由将来自pages目录下的blog.js文件。

在您喜欢的代码编辑器中打开项目，并在pages目录中创建一个名为index.js 的文件。

让我们创建一个返回一些 HTML 的组件！

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>Welcome to my portfolio! This is designed with Next.js!</p>
    </div>
)

export default Index

现在，如果您从命令行运行npm run dev，然后从 Web 浏览器访问http://localhost:3000，您将看到正在提供的内容。

使用 Link API

我们都喜欢 React 的页面渲染，对吧？我们也可以使用 Next.js 的Link API来实现同样的客户端导航。假设我们的作品集网站有一个“联系我们”页面，那么我们会有一个更新后的 Index 组件，看起来像这样：

import Link from 'next/link';

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

首先，我们从 Next.js 导入了 Link API 模块，然后通过在内容中创建占位符（使用{' '}语法）来内联使用它。该组件是一个高阶组件，仅支持少数几个参数，例如href（而href参数本身支持查询字符串等参数）以及URL掩码。底层组件，在本例中为标签还支持其他属性，例如style和onClick。

创建更小的可重用组件
现在我们已经有了一个良好的开端，但是你能想象每次创建页面都要重写页眉吗？这就是为什么我们要将网站拆分成更小的可重用组件！

Next.js 本身并没有规定你应该如何操作。但是请记住，如果你将它们放在pages目录下，外部可以直接访问它们。你希望别人直接访问你的页眉、导航栏和页脚吗？如果不希望，那就把它们放在 pages 目录之外。现在，创建一个components顶级目录：mkdir components，然后执行 touch header.js 命令来创建header.js文件。

在代码编辑器中打开header.js文件，并创建一个 header 组件！

const Header = () => (
    <div>
        <h1>My Portfolio Site</h1>
    </div>
)

export default Header

然后回到index.js文件，并将新的头部信息添加到其中：

import Link from 'next/link';
import Header from '../components/header';

const Index = () => (
    <div>
        <Header />
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

现在所有这些新事物组件的作用是帮我们省了一笔钱。

我们已成功安装 Next.js，初始化了一个新项目，创建了组件，并使用 Next.js Link API 将它们链接起来，在整个项目中复用了这些组件。这为后续的开发奠定了良好的基础。

Next.js 的功能远不止这些，例如在 JavaScript 中使用 CSS、自定义服务器（例如使用 Express）、页面间状态传递等等。请查阅文档，深入了解 Next.js，开启您的 Next.js 之旅！

感谢阅读。