- 摘要
- Modern full-stack Next.js & GraphQL boilerplate.
The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.
- User authentication
Authenticate users without worrying about security and storing passwords. Users get a magic link sent to their email and as soon as they click it they're logged in! - Team support
Bedrock is ready for teams out of the box. Users can create "projects", each of which has its own billing and members. The pre-built invitation system allows users to invite their colleagues to their projects. - Subscription payments
Securely accept subscription payments with Stripe Checkout. Bedrock comes ready for any plans you want (including yearly, per-seat pricing and everything else) and already handles invoices, billing management, PCI compliance, and much more. - Unstyled
Bedrock comes without any kind of styling or component library because, let's be honest, you'd just delete it anyway. The frontend contains the minimal code necessary to make the functionality work. Make it look the way you want it to by bringing your own component library or using any open source one! - GraphQL API & integrations
Enjoy the fantastic developer experience of creating a GraphQL API with Nexus & Prisma and querying it with urql. Bedrock also comes with token-based API authentication, allowing users to programmatically integrate with your product. - Adjustable to your preferences
Bedrock is designed to be modular so you can fine-tune it to your preferences. All tools except for Next.js are completely optional and can easily be removed or swapped for your favorite alternative. (learn more) - The best developer experience
There is a lot of fantastic tooling in the JavaScript ecosystem, but making it all work well together can be tricky. Bedrock comes with everything you need, configured perfectly, so you (and your team) can move fast. - Type-safe from the database to the client
Move fast thanks to TypeScript catching your bugs before you even hit "Save". Rename a field in the database schema or GraphQL API? TypeScript will immediately highlight where you need to update your code. - Code generation
Bedrock leverages code generation where it can so you have to code less and move faster. Prisma generates a custom ORM and migrations from your database schema, Nexus generates a custom GraphQL API from your ORM and GraphQL Codegen generates React hooks for fetching data from your GraphQL API. - Infinite scalability
Thanks to serverless, you never have to worry about scaling your servers. No matter how much traffic your product gets, Next.js will be able to handle it.
Here is the full list of everything Bedrock does for you so you don't have to:
Create the Next.js site
Setup TypeScript
Configure ESLint
Make ESLint work well with TypeScript
Configure Prettier
Make Prettier work well with ESLint
Setup pre-commit hooks for ESLint, Prettier and TypeScript
Establish a solid, scalable folder structure
Stop devs from importing server code on the client
Prepare CI with tests and type checking
Automatic dependency updates
Setup basic database schema
Put magic login authentication together
Setup email sending service
Create the basic GraphQL schema
Make development environment fast and solid
Expose the GraphQL schema from an API route
Handle SSR vs. SSG with authentication
Setup projects in the database and API
Build subscription payments system
Sync the necessary Stripe state to the database
Create migration setup and migrate production database from CI
Support multiple paid plans with upgrades & downgrades
Avoid exposing implementation details in the GraphQL API
Make authentication work on deploy previews
Build user invitation system
Avoid externalResolver issues with Next.js and Apollo Server
Abstract API route middleware management in one central place
Handle unauthenticated "accept invitation" link clicks
Setup client-side data fetching
Setup the normalized urql cache for the best user experience
Setup GraphQL Code Generator to generate data fetching React hooks
Build "Login" page that redirects to "Check your mailbox" page
Handle payments from client with Stripe Checkout
Global GraphQL error handling
Build project dashboard page
Build project settings page
Make sure projects can manage their billing
Implement human-readable and shareable URL paths
Build user-level dashboard page
Build user settings page
Build separate "Sign up" page
Handle global elements like Navbar and Footer
Avoid re-creating Prisma client on every hot reload during "next dev"
Figure out the best VSCode extensions to use
Setup Cypress end-to-end test setup
Typesafely seed database for end-to-end tests
Support authentication during end-to-end tests
Create the database in CI and connect it to app
Run end-to-end tests in CI
