Next.js: 使用 Next.js 的生产网站

创建于 2017-03-19  ·  72评论  ·  资料来源: vercel/next.js

大家好,我正在编译在 Next.js 中构建的生产应用程序列表,以便我们可以在 2.0 公告中展示它们。 请分享你的 :smile:

关于#727

列表:

最有用的评论

回到 5 月 8 日,我们实际上推出了https://insiderx.com ,这是一种药房储蓄卡。 我很久以前就在上面发布了发布公告。 我有一些新消息要宣布,但首先是我们所处位置的更新 -

自推出以来,我们的网站已实现零中断。 由于getInitialProps的惊人实现,我们添加了 Contentful 作为后端 CMS。 以全局变量为例,我们构建了配置,允许我们将大部分配置外部化。 后来我们添加了 Algolia 提前类型搜索和自动生成的药物信息页面。

在发布后的最后几个月中,我们将页面数从 7 增加到 14,000 多。 随着我们将整个网站本地化为另一种语言,这将很快再次翻倍。 我们的 next.js 与 express 的集成使我们能够灵活地控制参数化路由、根据需要设置 301 重定向并支持我们的本地化工作。

因为使我们网站独一无二的所有东西都在 Contenful、Algolia 或自定义 Express 配置文件中具体化,所以我们能够做一些了不起的事情 -

今天我宣布推出https://justrx.com。 在不到 30 天的时间里,我们就能够利用我们的技术堆栈并将其转换为允许我们构建具有完全不同的路线、内容、组件、主题和内容的其他站点的东西。 JustRx.com 是一种略有不同的药房储蓄卡,它的网络更窄(位置更少)。

这不是 InsideRx.com 的分支。 当我们将代码部署到一个站点时,我们将其部署到所有域。 这使我们能够随着时间的推移继续增强我们的网站,并继续使用最佳实践进行构建。

如此快速地推出这个解决方案的成功很大程度上取决于我们的技术堆栈,以及 Next.js 为我们提供的东西。 你可以看到性能。 目前我们仍在使用 Next.js 的 2.2.x 版本。 我们将在一段时间内升级到 Next 4。 我们最初的测试表明我们从每秒 1.3 次渲染增加到 5.6 次渲染。 我们预计随着切换到 Next 4,下面的性能数字会增加,这也会升级我们的 webpack 设置。

screen shot 2017-10-15 at 9 56 09 pm

所有72条评论

https://project-r.construction/ (提前警告德语)

来源: https :

这算作生产应用程序https://platzi-music.now.sh/吗? (在制品)

刚刚部署了一个客户网站,它使用 next 来渲染它的前端和 adonis.js 作为它的后端。

很快就会用来自这个项目的 adonis.js + next.js 样板来建立一个 repo。 :)

https://skyslimo.com

bigfive.world - 基于ipip.ori.org 的五因素性格测试模型网站。
前端是 next.js,后端由 5 个不同的微服务提供服务。
一切都托管在 zeit/now 上。

zrrrzztmaccyber创建。

等待发射去。 当我得到这个词时,我会在这里补充。 =)

https://nteract.io现在使用 next(昨天部署的!)

https://www.insiderx.com

在过去的三个月里,我一直在研究这个。 这是一个网站,用于为美国境内未投保和高免赔额的计划患者节省品牌处方的费用。 我们使用了 Next,因此我们可以在第一次访问和导航时创建一个快速响应的站点。

我正在关闭这个。 很快就会创建维基文章👍🏻

@timneutkens https://www.schlouk-map.com。 有趣的是,它为每个用户(不同的手机、平板电脑、台式机)提供了定制的体验,并拥有所有“现代”实践,如深度链接、开放图等。

任何人都可以分享一些回购/来源吗? 会好的。 所有的例子都很好,它们运行良好,但它们也非常简单。 一旦我尝试组合一些东西,或者做一些更高级的东西,我就会遇到墙。

@anomaly44 - https://github.com/nteract/nteract.io做了很多自定义的事情,包括 SCSS 编译、操作系统检测。 我们曾经用它运行一个额外的代理服务器,尽管它似乎不再存在。

@anomaly44如果您愿意,可以查看Ritoplz 存储库

我使用的一些东西:

  • 用 Jest 和酶测试反应成分
  • i18next 翻译
  • 环境变量
  • 自定义服务器能够使用url-prettifier
  • 还有一堆其他的东西......我认为它可能对你有帮助,因为它是一个完整的应用程序。

Ps:不要将我的项目作为构建项目的规则。
编辑:将 url 指向 master 分支,因为它被合并了。

使用 Next v3 静态导出功能,我已经能够在 Github Pages 上构建我公司的网站(Github Pages + Travis CI + Next.js 是成功的要素): https :

这不是网站,而是使用 Next.js v3 导出渲染代码的 Electron 应用程序
https://github.com/PlatziDev/pulse

Rx Visualizer是用 next.js 构建的

@bukinoshita很棒的例子! 我喜欢你如何集成 redux,并为 SSR 使用身份验证 为什么不把你的项目作为构建项目的规则?

谢谢@fabioespinosa! 因为我们都有不同的构建事物的方式,有些东西我们喜欢,有些东西我们不喜欢。 我们根据自己的喜好以及我们对每种工具的感受进行调整。 这就是为什么我这么说,用作示例而不是规则。 😅

https://owls.co ;)

@briva不错!!

http://www.wanoyume.com和 repo 是: https :

显然 Deliveroo 正在使用 next.js。 这可能是最好的展示。 查看 Deliveroo 工程师谈论使用 next.js 的链接。

https://www.youtube.com/watch?v=h6rETZH6Ym0

@carlos-peru 他们还没有投入生产 😄

@timneutkens视频来自 React London 2017 年 4 月,目前https://deliveroo.co.uk/使用 React。 视频解释了他们使用 next.js 从 Angular 迁移到 React。 我认为他们与 next.js 的工作因此正在生产中,但我不确定。 所以,我小心翼翼地用了“显然”这个词😉

哈哈别担心👌我不是想说明问题❤️目前的deliveroo.co.uk是rails + react而不是Next.js。 我之前在 slack 上和 Jasdeep 谈过👍随意加入 btw 😄: https ://zeit.chat

https://sergio.now.sh/代码)<- 使用 Next.js v3 和具有 networkFirst 缓存的服务工作者并使用 Preact 来减少生产包大小的导出站点。

很赞👍💯

你能创建一个展示页面吗? @timneutkens

似乎是个好主意@austinamorusotraceme 👍 将与 evilrabbit 谈论它👍

使用 Next.js 和 Now 构建的完整电子商务。

https://www.institchu.com

@chhuang仅供参考,如果您在查看您的网站时使用破坏性错误analytics is not defined ,这会阻止整个网站加载!

@mashaal你在使用什么拦截器,我有 ABP,它对我来说很好用吗?

ublock 起源1.14.8

@chhuang加载时: https :

总的来说,这是一个很棒的实现并且非常好! 除了 Next.js 之外,完整的堆栈是什么样的?

另外,我应该提到整个站点无法加载像@mashaal这样的 uBlock 来源(这可能是一个 p0 阻止程序,IMO)。

谢谢大家,非常感谢反馈。 我刚刚修复了 Adblocker 问题,其中一个静态 javascript 名为tracking.js ,默认情况下它被阻止。

@pruhstal我假设这是因为它正在加载结构图像,尽管它不应该是因为它延迟加载图像,并且所有图像都应该缓存在服务器上,并且在您完成加载后也缓存在浏览器中。

使用 Next v4 的 SaaS 网站

https://www.yeep.io/

回到 5 月 8 日,我们实际上推出了https://insiderx.com ,这是一种药房储蓄卡。 我很久以前就在上面发布了发布公告。 我有一些新消息要宣布,但首先是我们所处位置的更新 -

自推出以来,我们的网站已实现零中断。 由于getInitialProps的惊人实现,我们添加了 Contentful 作为后端 CMS。 以全局变量为例,我们构建了配置,允许我们将大部分配置外部化。 后来我们添加了 Algolia 提前类型搜索和自动生成的药物信息页面。

在发布后的最后几个月中,我们将页面数从 7 增加到 14,000 多。 随着我们将整个网站本地化为另一种语言,这将很快再次翻倍。 我们的 next.js 与 express 的集成使我们能够灵活地控制参数化路由、根据需要设置 301 重定向并支持我们的本地化工作。

因为使我们网站独一无二的所有东西都在 Contenful、Algolia 或自定义 Express 配置文件中具体化,所以我们能够做一些了不起的事情 -

今天我宣布推出https://justrx.com。 在不到 30 天的时间里,我们就能够利用我们的技术堆栈并将其转换为允许我们构建具有完全不同的路线、内容、组件、主题和内容的其他站点的东西。 JustRx.com 是一种略有不同的药房储蓄卡,它的网络更窄(位置更少)。

这不是 InsideRx.com 的分支。 当我们将代码部署到一个站点时,我们将其部署到所有域。 这使我们能够随着时间的推移继续增强我们的网站,并继续使用最佳实践进行构建。

如此快速地推出这个解决方案的成功很大程度上取决于我们的技术堆栈,以及 Next.js 为我们提供的东西。 你可以看到性能。 目前我们仍在使用 Next.js 的 2.2.x 版本。 我们将在一段时间内升级到 Next 4。 我们最初的测试表明我们从每秒 1.3 次渲染增加到 5.6 次渲染。 我们预计随着切换到 Next 4,下面的性能数字会增加,这也会升级我们的 webpack 设置。

screen shot 2017-10-15 at 9 56 09 pm

@ khrome83 💯 ❤️

查看使用 next.js 构建的在线图像压缩器,后端的 node.js 和一些开源编译库。 这是链接: https :

请查看我使用 next.js 和 wordpress API 完成的摄影网站。 这是链接:http: //99foto.pl

新的 ticketmaster.com 移动站点正在 next.js 上构建
https://www.ticketmaster.com/new

https://www.common.com/使用 Next.js 的静态导出,托管在 Cloudfront CDN 后面的 S3 上,并使用 Contentful 作为 CMS。

预订体育活动假期

真空

https://sumup.com (以及所有其他 32 个国家/地区的网站,例如 sumup.de、.fr、.es...)

@connor-baer 你用什么进行国际化?

@connor-baer 这是您的网站吗? 看起来很棒! 似乎是 IOS 11.2.2 iPhone 7 Safari 上的导航问题。 它打开得很好,但后来很难关闭。

@vjpr我们从 Contentful(我们的 CMS)获取翻译的页面,在服务器上对其进行本地化,然后将其加载到getInitialProps 。 没什么好看的😉

@dav-is 谢谢! 我是主要开发人员😊感谢您的错误报告,我们会调查一下。 🙏

查看: https ://hreftools.com - 使用 next.js 和 node.js 构建的免费在线网络工具

我们正在使用 Next.js 和 Now 开发https://wecured.com

为我的大学制作了一个教师评级网站,这是一场革命,最近在当地媒体上有报道,现在有超过 15,000 条教师评论。

www.losestudiantes.co

我们有 3 个站点使用 Next.js

  • Cho Tot - 代理目录: https :
  • Cho Tot - 公开资料: https :
  • Cho Tot - 游戏化: https ://www.chotot.com/trainghiem

你现在可以在这里分享它们: https :

此页面是否有帮助?
0 / 5 - 0 等级