35 个最佳 Next.js 开源项目【附带源代码项目网址】
Next.js 拥有一个富有成效的开发人员社区，他们致力于开发框架、提出开源启动器并为潜在开发人员提供支持。该社区可在 Discord、GitHub 和 Twitter 等平台上使用。通过成为这些社区的成员，您可以从经验丰富的 Next.js 开发人员那里获得知识。
更重要的是，您可以为开发框架做出显着的贡献。
如果您是 Next.js 的新手，并且正在寻求开发初始 Next.js 应用程序的要点，那么本文将是您的救星。它包含 35 个最佳 Next.js 开源项目的详细汇编。
应用程序写入
这个开源 Firebase 有 iOS 支持。Appwrite 是一个开源后端服务器，可用于创建 iOS 应用程序。它快速且易于使用，因为它具有用于云功能、身份验证、数据库和文件存储等的实时 API。
开始使用：https://cloud.appwrite.io/login
打开助手
雄心勃勃且富有创造力的开发人员开发了每个开源项目。开源的信念是，我们可以共同努力，利用我们的知识推动技术进步，让世界变得更美好。
开放助手是一个为每个用户提供有用的基于聊天的大型语言模型的项目。因此，一个注定要彻底改变语言开发的平台已经出现。
开始使用：https://open-assistant.io/chat
下一个 Shopify 入门版
这家功能性电子商务零售店在其前端使用 Tailwind CSS 和 Next.js。值得注意的是，它使用 Shopify Storefront API 与后端交互。它利用 GraphQL 来探测我们的 Shopify 数据并记录购物车信息，以方便用户在会话期间进行操作。
Pankod
这是一个免费使用的开源 Next.js 样板，用于开发应用程序。Pankod 倾向于高性能，因为它支持 Sass、Redux、Express.js、TypeScript 和 CLI 工具。此外，它还具有 Storybook 功能支持，您可以使用该功能通过 React 构建交互式 UI 组件。
开始使用：https://pankod.github.io/next-boilerplate/
Next.js 登陆页面入门
此登陆页面主题生成器是用 Next.js、Tailwind CSS 和 TypeScript 编写的。它首先以经验为基础：Husky、Lint-Staging、Prettier、ESLint、Tailwind CSS、Next.js、PostCSS 和 TypeScript。
尝试一下：
https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template
使用 MySQL 和 Express 的登录系统
这个简化的电子邮件登录系统入门程序是使用 Next.js、MySQL、Node.js、Reactstrap 和 Express 构建的。
开始使用：
https://github.com/tejisav/nextjs-express-mysql-starter
Next.js 9 + Material UI + mySQL Starter
该项目可以由目标使用服务器端渲染 React 和 MySQL、Material UI 主题以及升级后的 Next.js 9 API 路由的开发人员来完成。Knex.js 用于构建查询。不过，开发人员还可以使用 SQLite3、Oracle、PostgreSQL 和 MSSQL 数据库。
该项目的最终目标不仅仅是创建一个演示，而是拥有一个功能齐全、只需进行微小更改即可使用的代码。例如，登录后的页面使用 JSON Web 令牌和带有 CORS 的 API 路由进行保护。
尝试一下：
https://github.com/adamlove01/nextjs-materialui-mysql-starter
用于 PostgreSQL 的 Next.js
最小的 Web 应用程序使用 Google OAuth、Postgres 11 和 NextJS 12.0.7 以及其他基本库。
尝试一下：
https://github.com/jimmylee/next-postgres
下一个 CMS Ghost 入门版
您可以使用 next cms Ghost 创建和发布引人入胜的博客。React 框架 Next.js 是动力源，而 headless Ghost 将提供内容。因此，您将拥有一个可投入生产的混合前端，其中包含出色的服务器渲染站点和静态站点。您的网站将可以随时在线访问并从边缘提供服务。同时，您的客户可以使用他们熟悉的 Ghost 创作系统。
尝试一下：
https://github.com/styxlab/next-cms-ghost
Next.js 电子商务样板
这是一个全功能的开源 Next.js 电子商务模板。它为使用 Next.js 和 Crystallize 构建 Jamstack 电子商务店面提供了一个无缝起点。
尝试一下：
https://crystallize.com/learn/open-source/boilerplates/react-nextjs
Next.js Stater（生产就绪）
这是 next.js 的入门项目，带有身份验证功能。这包括; Husky、LinkedIn Auth、无密码身份验证、Typescript、React 17、Fauna DB、Tailwind CSS、GitHub Auth 和 React Query Three。
尝试一下：
https://github.com/pbteja1998/nextjs-starter
Vercel 电子商务入门者
这是一个经过编译的入门工具包，最适合开发电子商务网站。Next.js 开发人员只需进行一些调整即可克隆并创建自定义商店。单击下面的链接立即开始。
尝试：
https://github.com/vercel/commerce
Next.js 与 Firebase
next.js 入门代码，可用于实现 Firebase Auth、云消息传递和 Firestone。
尝试一下：
https://github.com/shreyas-jadhav/next-firebase-starter
用于 Firebase 的 Next.js
这是一个与 Firebase 集成的 Next.js 项目。它允许与云 Firestore 一起进行文件上传、Firebase 登录以及实时数据库读写。
尝试一下：
https://github.com/bjcarlson42/nextjs-with-firebase
下一个SSS
您需要一个适合静态网站的模板吗？NextSSS就是答案。它完全设置了 Next SEOO、TypeScript、活动链接功能、Google Analytics 和 Tailwind CSS。
尝试一下：
https://github.com/ixkaito/nextsss
Next.js 与 PostgreSQL
该项目结合了 Postgres + React + Next.js。对于完全使用 JavaScript 构建网站的开发人员来说，它是理想的选择。更改很容易并且用户友好。
尝试一下：
https://github.com/mihalskiy/next-postgres
Next.js + MySQL 入门
它是使用 TailwindCSS 和 MySQL 的 Next.js CRUD。
尝试一下：
https://github.com/FaztWeb/nextjs-mysql-crud
Next.js 和 MongoDB 示例模板
即使它没有像它的前身那样有很多功能，这也是一个很好的 next.js 和 MongoDB 入门示例。
尝试一下：
https://github.com/kukicado/nextjs-with-mongodb
Next.js + MongoDB（准备用于生产）
这个 Next.js 和 MongoDB Web 应用程序模板设计简单，可以在实际应用中轻松学习。该软件包具有身份验证和帐户管理器、API 路由，并支持 GraphQL 和配置文件模板。
尝试一下：
https://github.com/hoangvvo/nextjs-mongodb-app
下一个电子商务
使用 Next.js 构建的优雅电子商务网站的示例。其安装和运行可能需要不到两周的时间。
尝试一下：
https://github.com/anilsenay/next-e-commerce
下一个电子商务
该入门项目拥有多种工具，可用于使用 Next.js 开发功能齐全的电子商务零售商店。该项目已使用 TypeScript 完成，并包含 SCSS 支持和 Redux。
尝试一下：
https://github.com/lucaspulliese/next-ecommerce
下一个电子商务
这是一个项目示例，旨在展示使用 Nextjs 无服务器功能和 Next.js 作为后端制作的完整电子商务。开发人员还使用了 Apollo Client 和 Apollo Server for GraphQL。
尝试一下：
https://github.com/RafaelGoulartB/next-ecommerce
Fullstack Next.js 电子商务入门
如果您正在寻找支持结账、身份验证和其他很酷功能的东西，请尝试这个。这是一个 next.js 电子商务模板，使用 TypeScript + NextAuth + Docker + Stripe + React Query + Prisma + Tailwind Sentry 等制作。
尝试一下：
https://github.com/olafsulich/fullstack-nextjs-ecommerce
Modern React Portfolio Template
这是一个优雅的、即用型的、现代的反应组合模板。单击下面的链接将其用于您的下一个项目。
点击这里：
https://github.com/chetanverma16/react-portfolio-template
devii
这是一个博客入门者。它嵌入了语法高亮 + React + Next.js + Markdown + TypeScript。
尝试一下：
https://github.com/colinhacks/devii
Nextplate
Nextplate 可免费使用，是一个使用 TailwindCSS 和 Next.js 构建的入门模板。它拥有您轻松启动下一个项目所需的一切。
尝试一下：
https://github.com/zeon-studio/nextplate
Nextarker chakra
Nextarker chakra 是一个一体化样板，用于通过 Typescript 设置和 Chakra UI 启动 Next.js Web 应用程序。
Next.js 的样板文件和入门工具
这是 Next.js 12+、TypeScript 和 Tailwind CSS3 的样板文件和入门工具。它由最初的开发人员经验组成：Netlify + Commitlint + Husky + Prettier + TypeScript + Jest + Lint-Staging + PostCSS + 测试库 + VSCode + ESLint + Tailwind CSS（由 ixartz 提供）。
尝试一下：
https://github.com/sozonome/nextarter-chakra
SWR
只需一个钩子，您就可以大大简化项目的数据获取周期。通过更高的稳定性、速度和正确性改善了用户体验。查看下面的链接。
点击这里：
https://awesomeopensource.com/project/vercel/swr
Timelite
这是一个基于 Next.js 和 React 构建的 Web 应用程序。它记录工作时间，不需要登录，也不需要互联网连接。数据存储在本地并且易于访问。致力于这个项目，以获得时间管理的完美解决方案。
尝试一下：
https://github.com/overshard/timelite
Next right Now
这是一个包含 TypeScript、Vercel 和 Next.js 11 的可用于生产的样板。它还包括：国际化、Airtable、分析、GraphQl、SaaS、B2B 多单租户、监控、Storybook、CI/CD、端到端和 CSS-in-JS 支持。
尝试一下：
https://github.com/UnlyEd/Next-right-Now
图像
Twitter 是全球最受欢迎的社交媒体平台之一。您可以使用 Twimage 将推文更改为图像。万岁！您不必再截图了。只需将推文的链接复制并粘贴到 Twimage 中即可。
尝试一下：
https://github.com/drkPrince/tweet-to-image
Jacob Herper-作品集
Jacob Herper-Portfolio 是一个 Next.js 项目示例网站。您可以使用 Tailwind、Next.js 和 TypeScript 构建类似的一个。您可以使用 GraphCMS 管理 Web 内容，并使用 Apollo 客户端通过 GraphQL 端点访问它。
尝试一下：
https://github.com/jakeherp/portfolio
GFW
全球森林观察是全球范围内几乎实时森林的在线监测工具。它基于 Next.js 和 React.js 构建。它有一个有助于森林管理的警报系统。
尝试一下：
https://github.com/wri/gfw
下一个-现实世界示例-管道
这是社交博客网站的示例，例如名为 Conduit 的媒体。它是使用 React、Angular 和 Next.js 等构建的完整包克隆。
尝试一下：
https://github.com/reck1ess/next-realworld-example-app
总结
上述集合是 35 个最佳 Next.js 项目的汇编，涵盖了广泛的概念。
浏览模板并单击下面的链接以访问小型和大型代码结构。这篇文章内容丰富，很容易适用于您的项目。
您可以使用上述项目来开发 Web 应用程序，例如电子商务、博客和其他基本插件。
尽管掌握了现有的技能，您仍然可以使用源代码并根据自己的喜好对其进行个性化设置。
详细的图文教程请关注公众号：计算机程序吧。
10万+粉丝交流 了解更多物联网技术知识请
关注微信公众号：计算机程序吧
