nextjs prisma boilerplate
1.0.0
这是围绕最新Next.js堆栈建造的完整堆栈样板。它是由官方文档中描述的最佳实践以及我从与其他人合作所获得的经验和知识中得出的决定所描述的。
不要花费接下来的3个月做出架构决策，选择库，设置开发和产品环境以及CI/CD管道，编写样板代码，而要在15分钟内安装此样板，然后立即开始处理您的功能。
如果应用程序破坏了，只需使用页脚右侧的
Reseed链接即可播放数据库。
您需要GitPod帐户，如果我的演示数据库破坏了，则可能是Postgres数据库URL。您可以在Elephantsql.com上创建一个，有关详细信息，请参见GitPod环境部分。
next-auth电子邮件/密码登录等，可以重复使用vs vs代码devcontainer等...） React 18.2.0 , Next.js 12.2.0 , Node.js 16.13.1 , Prisma 4 , Postgres 14.3 , TypeScript 4.7.4 , React Query 4-beta , Axios, React Hook Form 8-alpha , React Dropzone, Zod, msw, TailwindCSS 3 , Jest 28 , Testing Library React, Cypress 9.6.1 .
next-auth和Facebook，Google和凭据提供商进行身份验证.env* files ...pages - > layouts - > views - > components!important陈述）next-connect API处理程序getServerSideProps全局错误处理testing-library/react用于单位和集成测试jest-preview视觉调试，用blob polyfill模拟的图像，单独的.env.test*文件没有任何特殊调整，就有进一步改进的空间。
该项目有3个可用的开发环境：
您可以选择任何喜欢的环境。
选择哪一个？如果您喜欢传统的方法选择本地，那么如果您在团队中工作并希望与同事保持一致的环境，以轻松复制错误并快速在船上登上新成员，请选择Docker，如果您想制作沙箱，请重现错误并寻求公开选择GitPod。
克隆存储库和安装依赖项。
# clone repository
git clone [email protected]:nemanjam/nextjs-prisma-boilerplate.git
cd nextjs-prisma-boilerplate
# install dependencies
yarn install当您首次打开项目文件夹VS代码会要求您安装推荐的扩展名时，您应该接受所有内容，它们需要强调，自动完成，棉布和格式代码，运行测试，管理容器。
在.env.development中填写所需的公共环境变量。最快的方法是使用http服务器运行该应用程序。
您仅在Facebook oauth登录名中需要
https。为此，您需要mkcert来安装localhost的证书，您可以在docs文件夹中找到指令。
将PORT作为3001留在多个位置，如果要更改它，则必须在多个位置进行编辑（即所有Dockerfile.*和docker-compose.*.yml ）
# .env.development
SITE_PROTOCOL=http
SITE_HOSTNAME=localhost
PORT=3001
# don't touch these two variables
APP_ENV=local
NEXTAUTH_URL= ${SITE_PROTOCOL} :// ${SITE_HOSTNAME} : ${PORT}创建.env.development.local文件。
# create local file form example file
cp .env.development.local.example .env.development.local
在所有环境中，Postgres容器均配置为在Linux主机计算机上作为当前非根用户运行。这很重要，以便以正确的所有权和权限创建卷中的数据库文件。为此，您需要定义MY_UID和MY_GID 。设置它们的最佳地点是~/.bashrc 。
# ~/.bashrc
export MY_UID= $( id -u )
export MY_GID= $( id -g )填写所需的私人环境变量。唯一需要的变量是Postgres数据库连接和JWT Secret。
Facebook和Google凭据是可选的，仅用于OAuth登录。 Facebook登录需要
https才能重定向URL。您可以为POSTGRES_USER，POSTGRES_PASSWORD和POSTGRES_DB设置任何值。
# .env.development.local
# set database connection
POSTGRES_HOSTNAME=localhost
POSTGRES_PORT=5432
POSTGRES_USER=postgres_user
POSTGRES_PASSWORD=password
POSTGRES_DB=npb-db-dev
# don't edit this expanded variable
DATABASE_URL=postgresql:// ${POSTGRES_USER} : ${POSTGRES_PASSWORD} @ ${POSTGRES_HOSTNAME} : ${POSTGRES_PORT} / ${POSTGRES_DB} ? schema=public
# jwt secret
SECRET=some-long-random-string
# OAuth logins (optional)
# Facebook (you need https for this)
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
# Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=设置所有变量后，您可以在Docker容器内运行Postgres数据库，运行Prisma迁移，该迁移将从schema.prisma和带有数据的种子数据库中创建SQL表。
# run database container
yarn docker:db:dev:up
# run Prisma migrations (this will create sql tables, database must be running)
yarn prisma:migrate:dev:env
# seed database with data
yarn prisma:seed:dev:env在这一点上，一切都准备就绪，您现在可以启动该应用程序。打开http://localhost:3001在浏览器中查看运行应用程序。
# start the app in dev mode
yarn dev克隆存储库构建应用程序容器后。
# terminal on host
yarn docker:dev:build Docker环境将读取envs/development-docker文件夹的变量。从示例文件中创建本地env文件。它已经配置了所有变量。
# terminal on host
cp envs/development-docker/.env.development.docker.local.example envs/development-docker/.env.development.docker.local运行应用程序，数据库和管理容器。就是这样。 Project文件夹已安装到/app文件夹内部的容器中，您可以直接在主机上编辑源，也可以打开远程容器扩展选项卡，然后右键单击npb-app-dev ，然后在远程VS代码实例中选择Attach to Container和“打开/app ”文件夹。打开http://localhost:3001在主机上的浏览器中查看运行应用程序。
# terminal on host
yarn docker:dev:up在容器内打开新的终端，并在数据库中播种docker-compose.dev.yml已经传递了正确的Env文件。
# terminal inside the container
yarn prisma:seed注意：GIT将与您的帐户中的容器中存在，因此您可以直接从容器中提交并推动更改。
# check that git config is already set inside the container
git config --list --show-origin我建议您在本地安装Portainer Community Edition容器，以便于管理和调试容器，它是免费且非常有用的工具。
请访问Elephantsql.com创建免费帐户并创建免费的20MB Postgres数据库。转到gitpod.io，使用github登录。通过打开以下链接打开GITPOD中的分叉存储库（用真实的链接替换your-username ）：
https://gitpod.io/#https://github.com/your-username/nextjs-prisma-boilerplate
GITPOD环境将读取envs/development-gitpod文件夹的变量。从示例文件中创建本地env文件。
# terminal on Gitpod
cp envs/development-gitpod/.env.development.gitpod.local.example envs/development-gitpod/.env.development.gitpod.local在该本地文件中，从elephantsql.com设置了数据库URL。其他变量是自动设置的。
# envs/development-gitpod/.env.development.gitpod.local
DATABASE_URL=postgres://something:[email protected]/something现在迁移并播种数据库。
注意：
elephantsql.com数据库没有所有特权，因此您必须使用prisma push命令，而不是通常的prisma migrate dev。阅读有关文档/演示环境中的影子数据库的更多详细信息。
# terminal on Gitpod
# migrate db
yarn gitpod:push:env
# seed db
yarn gitpod:seed:env一切都设置了，您现在可以以开发模式运行该应用，然后在新的浏览器选项卡中打开它。
yarn gitpod:dev:env该项目具有4个单独的测试配置以及代码覆盖范围配置。所有测试都可以在Docker和GitHub动作中进行本地运行。
注意：您还可以使用
orta.vscode-jest扩展名来运行并调试所有开玩笑的测试，该测试已包含在建议列表中。
本地运行。
yarn test:client在Docker中运行。
yarn docker:test:client本地运行。
yarn test:server:unit在Docker中运行。
yarn docker:test:server:unit确保测试数据库已启动并迁移。您不需要种植它。
# run database container
yarn docker:db:test:up
# migrate test database
yarn prisma:migrate:test:env本地运行。
yarn test:server:integration在Docker中运行。
yarn docker:test:server:integration您需要运行测试数据库，与上一步相同。
本地运行。
yarn test:coverage在Docker中运行。
yarn docker:test:coverage在本地运行：
您需要运行和迁移测试数据库（不需要种子），构建用于生产的应用程序，运行应用程序并运行柏树。
# run database container
yarn docker:db:test:up
# migrate test database
yarn prisma:migrate:test:env然后，您需要构建生产应用程序。
# build the app for prod
yarn build然后，您需要同时启动应用程序和柏树。这将打开柏树GUI。
# starts the app and Cypress GUI
yarn test:e2e:env您也可以以无头模式（无GUI）运行柏树。
# starts the app and Cypress in headless mode
yarn test:e2e:headless:env在Docker中运行：
同时构建应用程序和柏树图像。
# build testing app image
yarn docker:npb-app-test:build
# build Cypress container
yarn docker:npb-e2e:build然后，您可以一次运行测试数据库，测试应用程序容器和柏树（以无头模式）容器。
# run db, app and Cypress headless
yarn docker:npb-e2e:up我只用Traefik反向代理进行了一个单独的存储库Nemanjam/traefik-proxy，它仅需要来自Dockerhub的环境变量和图像。还可以在服务器上构建，推出和重新部署最新图像的GitHub操作工作流程。您应该将其用于部署。
为了完整，我在这里描述了如何在本地和Docker中构建和运行生产应用程序。这两个可以用作测试的分期环境。我还描述了如何从当地开发机器中构建和将实时图像构建到DockerHub。
在生产模式下构建和运行应用程序时，它将从.env.production和.env.production.local中读取变量。在构建时间，唯一需要的变量是NEXTAUTH_URL （用于负责SEO的CustomHead组件中的基本URL）。如果使用getStaticProps （静态站点生成），则需要使用正确的数据传递DATABASE_URL 。在运行时，您需要在这两个文件中定义所有公共和私人变量。
构建和运行生产应用程序运行这两个命令。
# build app
yarn build
# start app
yarn start再次在Docker映像中构建生产应用程序时，您需要通过类似于本地的变量（ NEXTAUTH_URL和DATABASE_URL for SSG），这次这些变量是通过ARG_NEXTAUTH_URL Dockerfile.prod中的arg_nextauth_url和arg_nextauth_url和arg_nextauth_url和ARG_DATABASE_URL转发的。这次环境变量将从envs/production-docker/.env.production.docker and envs/production-docker/.env.production.docker.local读取。在运行时，您需要在这两个文件中定义所有公共和私人变量。
构建和运行Docker生产图像运行此图像。
# build production image
yarn docker:prod:build:env
# run production image
yarn docker:prod:up同样，您需要在envs/production-live/.env.production.live.build.local中设置NEXTAUTH_URL和DATABASE_URL （对于SSG）。从示例文件中创建此文件。
cp envs/production-live/.env.production.live.build.local.example envs/production-live/.env.production.live.build.local您需要编辑此纱线脚本，并设置您的真实DockerHub用户名和图像名称。
# replace your-dockerhub-username and your-image-name with yours
" docker:live:build " : " dotenv -e ./envs/production-live/.env.production.live.build.local -- bash -c 'docker build -f Dockerfile.prod -t your-dockerhub-username/your-image-name:latest --build-arg ARG_DATABASE_URL= ${DATABASE_URL} --build-arg ARG_NEXTAUTH_URL= ${NEXTAUTH_URL} .' " ,
现在，您可以构建，标记并推动将您的生产图像停止。要推动图像，您必须首先使用docker login登录。
# build and tag production image
yarn docker:live:build
# push image to Dockerhub
yarn docker:live:push已经设置了工作流程，可以在.github/workflows/build-docker-image.yml中的github动作中构建和推动生产图像。在您的存储库设置中，您只需要设置这些变量并运行工作流程即可。
# your dockerhub username
DOCKERHUB_USERNAME
# your dockerhub password
DOCKERHUB_TOKEN
# database url (only for SSG)
NPB_DATABASE_URL
# your live production app url (without trailing '/')
# i.e. https://subdomain.my-domain.com
NPB_NEXTAUTH_URL您只需要在docker-compose.live.yml中设置图像名称，将所有环境变量传递给它，然后在服务器上使用docker-compose up -d部署它。
# docker-compose.live.yml
services :
npb-app-live :
container_name : npb-app-live
image : your-dockerhub-username/your-image-name:latest为此，我已经用Traefik反向代理制作了单独的存储库Nemanjam/traefik-proxy，它允许您在Docker容器中托管多个应用程序，每个容器每个容器都会将不同的端口和Traefik Maps端口公开到子域中。有关如何配置此信息的详细信息，请参见README.md文件和其中的链接教程。您只需要运行应用程序容器，而Traefik将自动拾取它，而无需手动重新启动Traefik的容器。
除了Traefik之外，它还拥有用于管理容器的portainer容器，用于管理生产数据库的adminer容器，用于跟踪网站正常运行时间的uptime-kuma以及其他配置的postgres容器，该容器配置为接受远程主机的连接（用于在Github Action中构建应用程序）。
Bellow列出了您需要设置的所有环境变量。为了简单起见，我在这里向您展示了如何在local .env文件中设置它们， docker-compose.yml文件将读取它，并将所有必需的变量转发到容器中。对于演示应用程序，这是可以的，但是对于真实的生产应用程序，适当的方法是将它们设置在云提供商的仪表板中或使用一些专用的库。
# create .env file locally and set vars
cp apps/nextjs-prisma-boilerplate/.env.example apps/nextjs-prisma-boilerplate/.env
# copy populated local .env file to server securely with ssh
scp ./apps/nextjs-prisma-boilerplate/.env ubuntu@your-server: ~ /traefik-proxy/apps/nextjs-prisma-boilerplate这些都是所需的变量。
MY_UID和MY_GID是您当前用户和Linux服务器组的ID。您可以通过在服务器终端中运行id -u和id -g来查看它们的值。设置它们的最佳地点是在~/.bashrc中，因为多个容器可能需要它们。它们被传递到Postgres容器中，以便使用正确的权限和所有权（作为当前用户而不是root用户）创建卷数据文件。
# apps/nextjs-prisma-boilerplate/.env
# public vars bellow
APP_ENV=live
# http node server in live, Traefik handles https
SITE_PROTOCOL=http
# real full production public domain (with subdomain), used in app and Traefik
SITE_HOSTNAME=nextjs-prisma-boilerplate.nemanjamitic.com
PORT=3001
# real url is https and doesn't have port, Traefik handles https and port
NEXTAUTH_URL=https:// ${SITE_HOSTNAME}
# private vars bellow
# db container
POSTGRES_HOSTNAME=npb-db-live
POSTGRES_PORT=5432
POSTGRES_USER=postgres_user
POSTGRES_PASSWORD=
POSTGRES_DB=npb-db-live
# don't edit this
DATABASE_URL=postgresql:// ${POSTGRES_USER} : ${POSTGRES_PASSWORD} @ ${POSTGRES_HOSTNAME} : ${POSTGRES_PORT} / ${POSTGRES_DB} ? schema=public
# current host user as non-root user in Postgres container, set it here
MY_UID=1001
MY_GID=1001
# or better globally in ~/.bashrc
# export MY_UID=$(id -u)
# export MY_GID=$(id -g)
# jwt secret
SECRET=some-long-random-string
# Facebook
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
# Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=为了避免手动工作.github/workflows/deploy.yml中已经有GitHub操作工作流程，它将使用SSH Action从Dockerhub删除旧图像，并从Dockerhub撤下并运行最新图像。您需要做的就是手动触发它或在现有构建和推动工作流程上链接。
# .github/workflows/deploy.yml
# trigger redeploy with build workflow
on :
workflow_run :
workflows : ['docker build'] 该项目在Docs文件夹中有大量文档。您可以找到所有经过精心记录的技术方面，尤其是重要且困难的部分。在那里，您可以找到问题描述，解决方案，代码段和相关的链接引用。
目前的文档是裸露的，从某种意义上说，它仅拥有裸露的技术信息如何解决某些问题，并且在具有其他背景下的人类友好文章中没有围绕。
这是您可以在其中找到的简要概述：
next-connect重要点mkcert棘手部分v4迁移，测试组件和钩子，水合，主要来自DOCS和TKDODO博客next-themes配置，主题作为Daisyui的自定义尾风插件实现v4迁移指南elephantsql.com设置用于演示目的getServerSideProps中的错误，使用错误孔处理错误并进行react Query，Typescript strict和strictNullChecks选项ts-jest setup, async tests with React Query, testing forms, mocking Blob class in jsdom for images, userEvent v14 migration, Suspense and ErrorBoundary in tests, msw, mocking Prisma in unit tests, using Supertest for testing controllers, backend integration tests with test database, multi projects Jest setup, running tests inside Docker and Github Actions, jest-preview设置，代码覆盖范围配置docker-compose.ymlNODE_ENV和APP_ENV变量，使用SSH Action部署VPSnotes/envs codesandbox.io gitpod.io stackblitz.com repl.it此应用envs文档欢迎捐款。您可以找到更多信息如何为贡献做出贡献。
Image组件用于本地托管的图像output: 'standalone' next.config.js中的'独立'构建选项prisma ，以进行迁移，而不会使工作流太复杂cypress: 10.x和next-connect: 1.x （它们具有破坏更改）JavaScript框架周围有很多讨论，理论，观点和嗡嗡声……但是让我们停止说话，选择最受欢迎的框架，阅读他们在文档中的建议，并在实践中尝试一下，检查它的工作原理，并查看我们是否可以对其构建有用和有意义的东西。
Nemanjam，LinkedIn
文档文件中附有完整的参考链接。最重要的参考是：
next-connect ，示例应用程序Hoangvvo/NextJS-MongoDB-App该项目使用MIT许可证：许可证
