当前位置: 首页 > 文档资料 > Next.js 中文文档 >

问答

优质
小牛编辑
129浏览
2023-12-01
这个产品可以用于生产环境吗?https://zeit.co 都是一直用 Next.js 写的。

它的开发体验和终端用户体验都很好,所以我们决定开源出来给大家共享。

体积多大?

客户端大小根据应用需求不一样大小也不一样。

一个最简单 Next 应该用 gzip 压缩后大约65kb

这个像 `create-react-app`?

是或不是.

是,因为它让你的 SSR 开发更简单。

不是,因为它规定了一定的目录结构,使我们能做以下更高级的事:

  • 服务端渲染
  • 自动代码分割

此外,Next.js 还提供两个内置特性:

  • 路由与懒加载组件: <Link> (通过引入 next/link)
  • 修改<head>的组件: <Head> (通过引入 next/head)

如果你想写共用组件,可以嵌入 Next.js 应用和 React 应用中,推荐使用create-react-app。你可以更改import保持代码清晰。

怎么解决 CSS 嵌入 JS 问题?

Next.js 自带styled-jsx库支持 CSS 嵌入 JS。而且你可以选择其他你喜欢的嵌入方法到你的项目中,可参考文档嵌入样式。

哪些语法会被转换?怎么转换它们?

我们遵循 V8 引擎的,如今 V8 引擎广泛支持 ES6 语法以及asyncawait语法,所以我们支持转换它们。但是 V8 引擎不支持修饰器语法,所以我们也不支持转换这语法。

可以参照这些 以及 这些

为什么使用新路由?

Next.js 的特别之处如下所示:

  • 路由不需要被提前知道
  • 路由总是被懒加载
  • 顶层组件可以定义生命周期getInitialProps来阻止路由加载(当服务端渲染或路由懒加载时)

因此,我们可以介绍一个非常简单的路由方法,它由下面两部分组成:

  • 每个顶层组件都将会收到一个url对象,来检查 url 或修改历史记录
  • <Link />组件用于包装如(<a/>)标签的元素容器,来执行客户端转换。

我们使用了些有趣的场景来测试路由的灵活性,例如,可查看nextgram。

我怎么定义自定义路由?

我们通过请求处理来添加任意 URL 与任意组件之前的映射关系。

在客户端,我们<Link>组件有个属性as,可以装饰改变获取到的 URL。

怎么获取数据?

这由你决定。getInitialProps是一个异步函数async(也就是函数将会返回个Promise)。你可以在任意位置获取数据。

我可以使用 GraphQL 吗?

是的! 这里有个例子Apollo.

我可以使用 Redux 吗?

是的! 这里有个例子

我可以在 Next 应用中使用我喜欢的 Javascript 库或工具包吗?

从我们第一次发版就已经提供很多例子,你可以查看这些例子。

什么启发我们做这个?

我们实现的大部分目标都是通过 Guillermo Rauch 的Web 应用的7原则来启发出的。

PHP 的易用性也是个很好的灵感来源,我们觉得 Next.js 可以替代很多需要用 PHP 输出 HTML 的场景。

与 PHP 不同的是,我们得利于 ES6 模块系统,每个文件会输出一个组件或方法,以便可以轻松的导入用于懒加载和测试

我们研究 React 的服务器渲染时并没有花费很大的步骤,因为我们发现一个类似于 Next.js 的产品,React 作者 Jordan Walke 写的react-page (现在已经废弃)