最佳的Next.js启动模板及如何选择
构建令人惊叹的项目可能是具有挑战性和压力的。
我们使用各种工具,投入了大量时间来创建可扩展和坚固的解决方案,以提供优秀的开发人员体验和用户体验。
有效地管理所有这些工具,包括Next.js,在使用第三方启动器或构建自己的启动器时变得很有帮助。通过启动器(又名脚手架、模版),您可以获得以下好处:
- 在创建新项目时减少所需的手动工作量
- 为每个项目提供一个坚实的基础
- 节省时间,使你的工程团队可以专注于交付出色的项目
尽管有所有这些好处,但你需要注意一些事项,以确定你的完美启动器是什么样的。
在本文中,我们将查看一些顶级启动模板,讨论使用它们的优缺点,并探讨构建自定义Next.js启动器的过程。在这个系列的第二部分中(coming soon),我们将深入研究如何构建我们自己的定制Next.js启动器。
两个帮助您评估Next.js启动器的分类
在选择您的工具时,您可能需要一个更加技术导向的启动器,或者如果你经常构建相同类型的网站,则可能需要一个更加用例导向的启动器。我们将在文章后面讨论这些类型,但这里有每种方法的一个例子。
技术导向的启动器
在构建各种项目时,技术导向的启动器最适用。例如:一个预先配置了首选工具的 Next.js 和 Tailwind 模板,可用于构建出色的应用程序。
用例导向的启动器
在经常构建相似类型的项目,这些项目还共享相同的核心技术时,用例导向的启动器最适用。例如:一个功能丰富的设置,具有一组工具和组件,用于构建与Stripe或Snipcart等用例相对应的令人难以置信的应用程序。
现在,让我们看一些每种类型的示例!👇
如果一个启动器不符合我的需求怎么办?
目前有很多优秀的第三方解决方案,你可以立即用作下一个项目的基础。这些项目是完全可定制的,并且通常可以作为一个游乐场,帮助你了解是否要使用特定工具。然而,如果没有第三方解决方案符合你的需求,请继续阅读!在本文的第二部分中,我们将开始探讨如何构建一个自定义启动器项目!
6个出色的Next.js启动模板
现在,让我们介绍一些你可以立即使用的出色的第三方启动器。我们将这些启动器逻辑地分成我们之前的技术导向和用例导向两组。
3个技术导向的Next.js启动模板
首先,让我们介绍技术导向的启动器。通常,这些启动器不包含任何UI元素,而是作为具有特定技术栈的基础。在现代开发中,配置有时需要比实际使用工具花费更多的时间,这就是具有预配置堆栈的启动器非常有帮助的原因。以下是你可以尝试的一些启动器的示例。
Nextjs Toolbox
Next.js Toolbox是一个集成了在使用Netlify构建项目时常用的功能的启动器。它为您提供一个具有Netlify函数、表单和重定向脚手架的Next.js应用程序,使您可以立即开始。
带有Turborepo的Next.js
Next.js with Turborepo是一个官方的启动器,具有两个由Turborepo支持的Next.js站点和多个本地包。
处理自定义Web字体
这个来自Vercel的Web字体启动器可以帮助您快速运行自定义字体,并演示如何在不影响性能的情况下加载它们。
3个用例导向的Next.js启动模板
现在,让我们看一些用例导向的启动器。这些启动器为用例提供了一个完全可用的基础。一些示例包括:
Next.js Saas starter
使用StartupFast开发的Nextjs模板,最大化您的生产力。一键即可获得SEO、分析、存储、身份验证、付款和电子邮件等配置好的模版。
Next.js Commerce
Next.js Commerce是一个全方位的React套件,用于构建高性能的电子商务网站。你可以在几次点击中运行并开始自定义。
使用Next.js的文档启动工具包
Vercel的这个启动器帮助您使用Nextra快速创建文档站点。
应该使用启动器吗?
既然我们已经介绍了如何分类启动器并看到了一些很好的示例,让我们看看何时使用启动器是有意义的,何时不是。让我们更进一步——我们将一起思考,是否应该选择第三方启动器,还是需要自己创建一个。
启动器何时有意义
如果你使用相似的技术栈和目标构建许多项目,那么启动器是一个很好的解决方案。在这种情况下,启动器减少了手动工作,为你提供了确切需要的——一个您熟悉的基础,可以在其上构建,而无需进行任何设置。
如果你正在探索新工具并学习使用它们的基本最佳实践,那么第三方启动器也是不错的选择,你可以在使用它们的同时逐步构建。通常,启动器是文档的很好补充,帮助你看到工具的实际运行情况。
如果第三方解决方案只在某种程度上满足你的需求,但你仍然需要在许多项目中重复使用相同的元素,那么部分或完全定制的启动器也可能非常好。在第三方启动器和自定义启动器之间找平衡,可能需要根据你的需求改造第三方启动器。
启动器可能不适合您的情况
另一方面,如果:
- 你对计划使用的工具和库不够自信——启动器的行为与主题或插件不同,因此你应该将其视为无法轻松切换的东西。
- 这是一个一次性项目,并且找不到符合你需求的开源启动器。在这种情况下,你将花费大量时间在可重用性上,这对你来说并不重要。
重要的注意事项:许可
许可是使用第三方启动器的基本方面之一。你可以安全地并且不受任何压力地使用其他团队构建的启动器吗?
让我们看看从许可的角度来看,通常有哪些重要的考虑因素:
- 商业用途:是否可以安全地将启动器用于商业目的,为你的品牌使用?
- 修改:你是否被允许根据您的需求修改启动器?
- 分发:是否可以安全地将启动器用于分发?
- 私人使用:你是否可以在私人中使用和修改启动器?
让我们看看启动器使用的许可,比如Apache许可证。简而言之,它允许你无需担心版税、可以将软件用于任何用途,你可以修改、分发和分发其修改版本!
阅读这些许可类型的描述可能有点痛苦。我明白。这就是GitHub功能派上用场的地方!如果您在GitHub上打开许可证文件,你将在顶部看到一个卡片元素,其中提到了所有基本方面。
构建您自己的 Next.js 起始模板
在探索第三方起始模板时,你可能意识到你对于您理想的起始模板的构想,而目前还不存在。
好消息!你有一个绝佳的机会构建一个自定义起始模板。 (谁知道呢?也许其他人也需要你的理想起始模板 — 别忘了你可以将你的项目开源。)
你可以采用的一种方法是在第三方起始模板的基础上构建你的解决方案。如果你找到了对你有用但可以改进的起始模板,你可以将其用作解决方案的基础。这是一个不错的方法,因为你将遵循已在起始模板中实施的最佳实践,并在此基础上进行扩展。
另一方面,你可以构建一个完全定制的起始模板。对你而言,这可能是一个明智的决定,原因有很多,比如:
- 你找不到一个结合您喜爱工具的起始模板,或者你喜欢以特定方式使用某些工具。
- 你使用特定用例构建许多项目,并且经常需要创建相似的组件。将这些组件移到模板中是一个合理的决策,肯定会提高你的生产力。
在建造房子时,基础设施是你不能轻易改变的东西。如果你要做的是创建一个完全定制的起始模板,情况也是如此。这就是为什么在准备和分析阶段,投入一定时间是至关重要的原因。让我们思考构建起始模板的最佳实践,并确定它应该有多灵活。
构建起始模板的最佳实践
构建良好的起始模板的最佳实践是什么?
首先,你必须确定你计划在创建每个项目时使用的工具。
在这里,您必须为自己回答一些问题:
- 你更喜欢使用哪个框架?
- 你是否有适合您的样式解决方案?
- 在你的应用程序中,你需要经常实现哪些具体功能(例如身份验证)?
- 有哪些东西是可复用的,而且你确信无论下一个项目是什么都不打算更改的?
你的脑海中有一份清单吗?它会直接用于起始模板!
接下来,关键是要确定你不确定或计划仅使用一次的工具 —— 将这些工具排除在外。
在这里,让我们看一个例子。你的下一个项目包含大量动画,但这并不是你构建的项目的一般趋势。考虑到这一点,你的动画库不应该成为起始模板的一部分。为了不破坏可重用性,我们鼓励你避免使用可能只使用一次的工具。
您的起始模板应该有多灵活?
这是一个重要的考虑因素,答案就在问题中。
正如我们之前提到的,起始模板是你信任并准备用于构建任何项目的坚实基础。
谨慎选择你的工具集。你的起始模板应该帮助你加快开发过程,而不是限制或增加开发过程的复杂性。
对工具集的某些部分,如果过于武断地加进来,可能会破坏起始模板的灵活性,从而阻碍你创建一个能帮助你提高生产力并在其上构建好的应用的基础目标。
为了构建一个灵活且有帮助的起始模板,从一个简单的解决方案开始,逐步添加东西,看看什么对你最有效!
尝试一些其他StartupFast起始模板
启动您的创业公司,不是在几周内,而是在几小时内。探索用于 AI 或 SaaS 等网站构建的 StartupFast Next.js模板:
简而言之
现在,让我们总结一下本文涵盖的内容:
- 起始模板是一个坚实的基础,你应该考虑使用。 通过投资时间来开发一个起始模板,我们会深入思考如何设计未来项目的基础。有了这个基础,未来一切都将顺利进行,我们不必打断工作来定义它。
- 创建一个起始模板可以提高你的生产力。 通过减少未来的重复任务,我们专注于项目特定的工作,并交付我们感到自信的项目。
- 开源的起始模板市场是一个有趣的领域。 为社区开源的许多出色的起始模板可以用于个人和商业项目。使用这些可以提高您的生产力,而无需投入时间来构建您自己的起始模板,或者你可以在开源解决方案的基础上创建自己的起始模板。
既然我们解释了起始模板的概念并展示了它们如何提高您的开发体验,现在是一起构建的时候了!在本系列的第二部分(coming soon),我们将一起探讨构建高质量自定义起始模板的过程。