如果 <Link>
的子元素是一个 <a>
标签并且没有指定 href
属性的话,那么我们会自动指定此属性(与 <Link>
的 herf
相同)以避免重复工作,然而有时候,你可能想要通过一个被包裹在某个容器(例如组件)内的
<a>
标签来实现跳转功能,但是 Link
并不认为那是一个超链接,因此,就不会把它的 href
属性传递给子元素,为了避免此问题,你应该给 Link
附加一个 passHref
属性,强制让 Link
将其
href
属性传递给它的子元素。
注意:Next.js
将会自动使用所加载脚本的 CDN
域(作为项目的 CDN
域),但是对 /static
目录下的静态文件就无能为力了。如果你想让那些静态文件也能用上CDN
,那你就不得不要自己指定
CDN
域,有种方法也可以让你的项目自动根据运行环境来确定 CDN
域,可以看看
构建打包和启动项目被分成了以下两条命令:
然后就可以直接启动 now
项目了!
Next.js
也可以使用其他的托管方案,更多详细可以看一下这部分内容 注意:我们推荐你推送 .next
,或者你自定义的打包输出目录(到托管方案上)(Please have a look at ,你还可以自定义一个专门用于放置配置文件(例如 .npmignore
或
.gitignore
)的文件夹。否则的话,使用 files
或者 now.files
来选择要部署的白名单(很明显要排除掉 .next
或你自定义的打包输出目录)
你可以将你的 Next.js
应用当成一个不依赖于 Node.js服务的
静态应用。此静态应用支持几乎所有的 Next.js
特性,包括 异步导航、预获取、预加载和异步导入等。
首先,Next.js
的开发工作没什么变化,然后创建一个 Next.js
的配置文件 ,就像下面这样:
需要注意的是,如果声明的路径表示的是一个文件夹的话,那么最终将会导出一份类似于
/dir-name/index.html
的文件,如果声明的路径是一个文件的话,那么最终将会以指定的文件名导出,例如上述代码中,就会导出一个readme.md
的文件。如果你使用了一个不是以
通过上述的类似代码,你可以指定你想要导出的静态页面。
或许,你还可以在 package.json
文件中多添加一条命令:
现在就只需要输入这一条命令就行了:
这样,你在 out
目录下就有了一个当前应用的静态网站了。
你也可以自定义输出目录,更多帮助可以在命令行中输入
next export -h
获取
现在,你就可以把输出目录(例如/out
)部署到静态文件服务器了,需要注意的是,如果你想要部署到 Github
上的话,那么需要需要增加一个
例如,只需要进入 out
目录,然后输入以下命令,就可以把你的应用部署到
当你输入 next export
命令时,我们帮你构建了应用的 HTML
静态版本,在此阶段,我们将会执行页面中的 getInitialProps
函数。
res
则是不可用的(res
和 res
只在服务器端可用)。
基于此,你也无法在我们预先构建
HTML
文件的时候,动态的呈现HTML
页面,如果你真的想要这么做(指动态构建页面)的话,请使用next start
无论是开发者体验还是终端表现,它都超出预期,所以我们决定将它共享到社区中。
客户端包的大小根据每个应用程序的功能等不同而不尽相同。 一个最简单的 Next
程序包在 gzip
压缩后可能只有 65kb 大小。
是也不是。 说是,是因为二者都让你的开发变得更轻松。 说不是,则是因为 Next.js
强制规定了一些目录结构,以便我们能实现更多高级的操作,例如:
SSR
)
此外,Next.js
还内置了两个对于单页应用来说比较重要的特性:
如果你想在 Next.js
或其他 React
应用中复用组件,则使用 create-react-app
是一个很好的选择,你可以稍后将其导入以保证代码库的纯净。
局部(scoped
)css
,当然,你也可以在 Next
应用中添加任何你喜欢的代码库来使用你想要的
局部(scoped
)css
,当然,你也可以在 Next
应用中使用以下示例中的任何一种 CSS
预处理器方案:
(语法特性)我们参照 V8
引擎,因为 V8
广泛支持 ES6
和 async
以及 await
,所以我们也就支持这些,因为 V8
还不支持类装饰器(class
decorator
),所以我们也就不支持它(类装饰器)
基于上述几个特点,我们能够构造出一个具有以下两个功能的简单路由:
url
对象来检查 url
或者 修改历史记录
<Link />
组件作为类似于 <a/>
等标签元素的容器以便进行客户端的页面切换。
我们已经在一些很有意思的场景下测试了路由的灵活性,更多相信可以
URL
与 任何组件之间产生映射关系。 在客户端,<Link />
组件有个 as
属性,它能够改变获取到的 URL
这由你决定, getInitialProps
是一个 异步(async
)函数(或者也可以说是一个返回 Promise
的标准函数),它能够从任意位置获取数据。
当然,这还有个用 的例子呢。
为什么我不能在开发服务器中访问我的静态导出路由呢?
这是一个已知的 Next.js
架构问题,在解决方案还没内置到框架中之前,你可以先看看这一个中的解决方法来集中管理你的路由。
我可以在 Next应用中使用我喜欢的 JavaScript库或工具包吗?
我们在发布第一版的时候就已经提供了很多例子,你可以看看
你们是怎么做出这个框架的?
我们力求达到的目标大部分都是从 由 Guillermo Rauch
给出的[设计富Web应用的 7个原则]中受到启发,PHP
的易用性也是一个很棒的灵感来源,我们觉得在很多你想使用 PHP
来输出
HTML
页面的情况下,Next.js
都是一个很好的替代品,不过不像 PHP
,我们从 ES6
的模块化系统中获得好处,每个文件都能很轻松地导入一个能够用于延迟求值或测试的组件或函数。
原文发布时间为:2017年10月30日原文作者:清夜本文来源: 如需转载请联系原作者
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
翻译:巡洋舰科技——赵95
你是不是看烦了各种各样对于深度学习的报导,却不知其所云?我们要来改变这个问题。
有趣的机器学习 前六章已更新!点此查看、、
Google翻译背后的科技被称为机器翻译。它改变了世界,在本来根本不可能的情况下让(不同语言的)人们完成了沟通。
但我们都知道,在过去的15年里,高中学生已经使用Google翻译...额 ...协助他们完成他们的西班牙语作业。这已经不是新闻了…?