五分钟快速上手 Next.js

Next.js是一个轻量级的开源 JavaScript 框架，基于 React 库构建，能够实现快速的服务端渲染，并且与服务器无关（即既可以搭配其内置的 HTTP 服务器使用，也可以搭配任何 Node.js 服务器使用）。它由Zeit公司开发。路由由页面直接处理，使得网站的快速搭建变得轻松便捷。事实上，我们只需 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文件，并在 `<script>` 标签下添加以下内容scripts：

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

太好了，我们已经安装好了 Next.js，可以继续下一步了！

创建我们的第一个组件

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

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

让我们创建一个返回一些 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 模块，然后通过创建一个占位符并将其内联到内容中{' ' }。该<Link>组件是一个高阶组件，仅支持几个参数，例如href（该参数本身支持查询字符串等参数）以及用于 URL 掩码的参数。底层组件（在本例中为 `<link> ` 标签）还支持其他属性，例如 ` href<link>` 和 `<link> ` 。as<a>styleonClick

制造更小的可重复使用组件

现在我们开局不错，但是你能想象每次创建页面都要重写页眉吗？这就是为什么我们要把网站拆分成可重用的小型组件！

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

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

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

现在，这个新<Header />组件只是帮我们省去了一个<h1>标签，但稍加想象就能明白，在现实世界的网站中，肯定不止一个 HTML 标签。

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

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