Relivator: The Most Feature-Rich Next.js 14 Starter

🌐 https://relivator.bleverse.com

We aim to create the world's most feature-rich and global Next.js starter. Offering more than just code—it's a journey. It's stable and ready for production. Scroll down and check out the breathtaking list of project features, including switching between Clerk/NextAuth.js and MySQL/PostgreSQL on the fly.

Each week, we grant early access to Relivator to 2 randomly selected individuals. Simply star this repository and let us know how to contact you. For discussions, join the project Discord.

How to Install and Get Started

Essential Tools: Ensure that VSCode, Git, GitHub Desktop (Windows/macOS | Linux), and Node.js LTS (Windows/macOS | Linux) are installed.
Project Cloning: Create a new fork and use GitHub Desktop to download it.
Configuration: Open VSCode and load the project folder. Press Ctrl+Shift+P and search for >Create New Terminal. Install PNPM using corepack enable. Then, enter pnpm install to install the packages. Next, copy the .env.example file to a new .env file and fill in at least the DATABASE_URL field. Finally, send the database schema to your database using pnpm mysql:push or pnpm pg:push.
Run, Stop, Build: Use pnpm dev to run the app (visit http://localhost:3000 to check it). Stop it by focusing on the console and pressing Ctrl+C. After making changes, build the app using pnpm build. Thats okay if you see Clerk's warnings.
Commit and Deploy: Upload your project to your GitHub profile using GitHub Desktop. Then, deploy it by importing the project into Vercel, making your website publicly accessible on the internet. If you wish to share your work, seek feedback, or ask for assistance, you're welcome to do so either in our Discord server or via GitHub discussions.

Please scroll down the page to see a lot of useful information about how everything works in the project.

Project Features Checklist

This roadmap outlines the key features and improvements planned for implementation in this Next.js starter. Items not marked may already be configured but might not have undergone extensive testing. Should you find any mistakes, please create an issue.

🌐 https://relivator.bleverse.com

Project Commands

pnpm stripe:listen: This command runs the Stripe webhook listener and assists in setting up Stripe environment variables. You may need to have Stripe CLI installed to run this command.
pnpm appts: This command performs a comprehensive check of the codebase. It sequentially executes pnpm typecheck to conduct type-checking and identify any TypeScript errors, pnpm lint for code linting, pnpm format to format with Prettier, and finally, pnpm:build.
pnpm latest: This command updates all project packages to their latest stable versions and updates next-intl to the latest beta version. Please update the latest line in the scripts section of package.json if a newer beta version of next-intl is released.
pnpm latest:canary: This command runs pnpm latest and updates Next.js and React to the latest versions available on their canary branches. Use this only if you are certain about why you need it.

About the Project

We've laid the foundation – now it’s your turn to dive in and speed up your development. Explore everything new with Next.js 14 right here, with Relivator.

Grab it and enjoy! Don’t forget: your feedback and stars mean the world to us. Smash that star button! Fork it! Your involvement lifts the project to new heights! If you have coding skills, your contributions are always welcome!

Run into issues? Join our repository discussions, open an issue, or DM us on: Twitter/𝕏, Discord, Fiverr, LinkedIn, or Facebook.

This project has big plans and we value all the help we can get! If you’re keen to make your own commits, check out the Project Roadmap above to see potential enhancements for the project. Also, use Cmd/Ctrl+Shift+F in VSCode and search for todo: to find spots that need attention. Please visit the Commits tab for more opportunities to assist.

Note Striving to be highly useful, this README contains a lot of information. Some text may be outdated and will be updated as we grow. Please let us know on the discussion page if you spot any small issues like outdated info, broken links, or grammatical/spelling errors in README.md or other files.

Environment Variables (`.env` file)

Refer to the .env.example file as your guide. Simply copy data from it to a new .env file.

The DATABASE_URL environment variable is mandatory; others are optional. You're welcome to deploy the application as-is, but ensure you verify what's necessary. Though the application will run without certain variables, missing ones may deactivate specific features.

Ensure that default values are defined for essential environment variables. Never store secrets in the .env.example file. For newcomers or repo cloners, use .env.example as a template to create your .env file, ensuring it’s never committed. Update the schema in /src/env.mjs when adding new variables.

Further information about environment variables is available here.

A cleaner and improved version of this section is coming soon. Keep an eye out!

In the 1.1.0 Relivator release, the .env.example file was greatly simplified and will be streamlined even further in upcoming versions. We aim to ensure that unspecified values will simply deactivate related functionality without halting app compilation.

Stripe Payments

Refer to the .env.example file as your guide where and how to get all the important environment variable keys for Stripe, including webhooks both for localhost and deployment.

Locally, install the Stripe CLI and run the command pnpm stripe:listen to initiate the Stripe webhook listener. This action connects Stripe to your account and generates a webhook key, which you can then set as an environment variable in Stripe's settings.

When testing Stripe, you can use its test data: 4242 4242 4242 4242 | 12/34 | 567 | Random Name | Random Country.

Please refer to src/app/api/webhooks/stripe/route.ts file to learn more in the deep details how Stripe things work in the app. You can also visit the official Stripe repository, where you'll find a lot of useful information.

Database Support

Relivator is designed to effortlessly support both MySQL and PostgreSQL databases. Although it comes with MySQL and PlanetScale configured as the default database provider, switching to PostgreSQL provided by Neon/Vercel/Railway — is really simple as pie. To do so, just update the NEXT_PUBLIC_DB_PROVIDER key in your .env file to neon/vercel/railway accordingly. While Relivator is optimized for these providers, any others compatible with Drizzle and NextAuth.js might also work, though they may require some additional setup.

To initiate a new database or propagate schema changes, execute the pnpm mysql:push or pnpm pg:push command. This ensures that all drafts made to the schema files—found under src/data/db/*—are mirrored in your selected database provider.

For database migrations, utilize the mysql:generate/pg:generate, review the drizzle folder to ensure everything correct (execute db:drop if not), and run the pnpm:migrate command when you are ready.

Ensure you do not manually delete files from the drizzle directory. If a migration needs to be reversed, employ the pnpm db:drop command to manage this in a controlled way.

In the release of Relivator v1.1.0, we made our best efforts to provide simultaneous support for both MySQL and PostgreSQL for the Drizzle ORM. In future releases, we aim to integrate Prisma ORM to this project as well. Thanks to it, the project will be even more inclusive to everyone.

By default we ensure that every database system has everything the same by using NEXT_PUBLIC_DB_PROVIDER env variable and by exporting things in the src/data/db/index.ts file. When you decide which database provider is best suit your needs, you can safely comment out or remove unneeded providers in the switch-case of this file, then related schema files can be removed as well; note that some small additional work may be also required.

Additional Notes About Stripe

The Stripe webhook API route does not need to be invoked explicitly within your application, such as after a user selects a subscription plan or makes a purchase. Webhooks operate independently of user actions on the frontend and serve as a means for Stripe to relay events directly to your server.

When an event occurs on Stripe's end, such as a successful payment, Stripe generates an event object. This object is then automatically sent to the endpoint you've specified, either in your Stripe Dashboard or, for testing purposes, in your package.json via the Stripe CLI. Finally, your server's API route receives the event and processes it accordingly.

For example, when a user selects a subscription plan, you would typically first use Stripe's API to create either a Payment Intent or Setup Intent object. This action can be executed either on the client-side or the server-side. The frontend then confirms the payment using Stripe.js, thereby completing the payment or subscription setup process.

Your webhook is automatically triggered based on these events. There's no need to manually "call" the webhook route; Stripe manages this for you according to your settings in the Stripe Dashboard or in your package.json for local testing.

After deploying your app, don't forget to specify the webhook URL in your Stripe Dashboard. Navigate to the Webhooks section and enter the following URL: https://yourdomain.com/api/webhooks/stripe.

In summary, there's no need to specify the path to your Stripe API route where the user selects a subscription plan. The webhook mechanism operates independently and is triggered automatically by Stripe.

Internationalization

Stay tuned for further expansions to this section in the future.

Multilingualism at Bleverse is revered. We adore discussing it and plan to delve into the topic of Next.js 14 App Router internationalization in future writings.

Use pnpm lint:i18n to verify your i18n files. The tool attempts to rectify issues when possible, offering features like ascending sort. No output means everything is in order.

Presently, all languages are machine-translated. Future revisions by native speakers are planned.

Note that i18n messages from another one of our open-source projects are currently present and will be removed shortly.

Currently supported locales (you can add your own manually):

de-DE, en-US, es-ES, fr-FR, hi-IN, it-IT, pl-PL, tr-TR, uk-UA.

Design Decisions, Code Insights, Recommendations

We're continuously improving this section. Contributions are welcomed!

Our starter aims to be a rich resource for developers at all stages of their journey. Within the comment blocks and dedicated sections at the end of select files, you'll find valuable insights and clarifications on a wide array of topics. Your contributions to enhancing these educational nuggets are highly encouraged!

Advanced Environment Variables:

The .env.example file covers all the essential variables for a fully functional website, tailored for beginners. However, if you require advanced configurations, you can extend your .env file with the following variables:

# For Discord Server Integration: Navigate to Edit Channel > Integrations > New Webhook to obtain the URL.
DISCORD_WEBHOOK_URL=""

# For Loglib Integration: The site ID can be found on https://loglib.io.
LOGLIB_SITE_ID=""

About the Plugins Folder:

This folder contains optional plugins for Relivator. Developed by @blefnk and other contributors, these plugins extend functionality and provide additional features. If you find that certain plugins are not beneficial for your project, feel free to remove their corresponding folders.

Function Over Const for Components:

We advocate the use of the function keyword instead of const when defining React components. Using function often improves stack traces, making debugging easier. Additionally, it makes code semantics more explicit, thereby making it easier for other developers to understand your intentions.

Personal Recommendations:

We advise regularly clearing your browser cache and deleting the .next folder to ensure optimal performance and functionality.

Currently, we don’t utilize Contentlayer due to its instability with Windows. Therefore, we're exploring options for its usage in the .env configuration file. Future plans might involve developing our own solution for content writing. Integration with external providers, such as Sanity, may also be a future feature, with corresponding enable/disable options.

Project Configuration:

The src/app.ts file hosts critical configurations to modify website contents and settings, enabling you to:

Control the content presented on the website.
Adjust various settings, such as deactivating the theme toggle.
Manage generic site-wide information.

Customize this file as per your requirements.

How to Deploy the Project:

Please check the How to Install and Get Started section before making the initial deployment.

Consult the deployment guides for Vercel, Netlify, and Docker for further details. The project has only been tested on Vercel; please inform us if you encounter issues with other deployment services.

UI Components:

By default, this project includes components from various libraries, as well as unstyled shadcn/ui components. Shadcn/ui even allows you to generate new UI components using its CLI (where "button" can be any Shadcn UI element): pnpm dlx shadcn-ui@latest add button.

Authentication:

Setting up authentication is straightforward. This section will be implemented soon.

Bun Things Compatibility:

Relivator can already harness some fantastic Bun features. For this starter, we currently recommend using pnpm. Full Bun support and compatibility will be shipped as soon as Windows binaries are available. Section expansion coming soon.

Typical App Workflow (Coming Soon):

A comprehensive guide detailing the typical application workflow will be implemented soon. For now, here's a quick overview:

Run Development Server: pnpm dev
Environment Configuration: .env
Middleware Setup: middleware.ts
Additional Steps: Stay tuned...

Recommended Things to Learn:

More learning resources can be found within the files of this repository.

Migration from Other Starters to Relivator

If you've been exploring which Next.js starter to select for your next project like create-next-app, create-t3-app, Next.js Commerce (Vercel Store), SkateShop, OneStopShop, Taxonomy/nextflix, payload, Medusa, or any other projects – your search can end here.

All these projects are incredible, and if minimalism appeals to you, we recommend checking them out. The creators behind these projects are extremely talented individuals, and we offer them our endless thanks. Without them, this starter would not exist.

However, if you want a POWERHOUSE—Relivator suitable for every scenario—then Relivator is definitely the starter you need to fork it right now! Relivator incorporates numerous features from all those projects and strives to push the limits of Next.js and React capabilities. With Relivator, your opportunities are boundless.

If you choose Relivator to be your next project starter and you want to migrate from the projects above to Relivator, then please give us a few days. We will use the project wiki to write there guide how to do this. In this guide you will learn how to migrate your project to our project. Migration guide will be available for both "app" and "pages" directories.

Contributing and Credits

This section will be enhanced soon with simpler steps to get everything ready.

Contributions are warmly welcomed! We express our gratitude to everyone who has contributed to this repository. Your contributions will be recognized. If you have any questions or suggestions, please open an issue. For more information, see the contributing guide.

Please visit this special wiki page to view the full list of credits and contributors. To contribute to Bleverse Relivator, follow these steps:

Begin by reading the "How to Install and Get Started" section on the top of this repository, and by reading CONTRIBUTING.md page.
Create a branch: git checkout -b <branch_name>.
Make and commit your changes: git commit -m '<commit_message>'
Push to the original branch: git push origin <branch_name>
Submit the pull request.

Alternatively, check the GitHub docs on how to create a pull request.

Project License

This project is licensed under MIT and is free to use and modify for your own projects. Check the LICENSE.md file for details.

🌐 https://relivator.bleverse.com

This Next.js 14 starter was crafted with love by @blefnk Nazarii Korniienko, and by the incredible Bleverse OSS community. We are deeply grateful for all the contributions and support provided by everyone for this project.

Happy coding! Embark on your coding adventure, learn, iterate, and most importantly – enjoy the process! Remember – this is a space of learning and experimentation. Dive in and savor the journey! 🚀🌌

🔥 We're Growing Fast! A Huge Thanks to All Our Supporters! Check Out Our Star History:

Check out our other free Next.js 14 starter. This one, a monorepo, provides the tech used in the current starter and adds: Turborepo/Turbopack, Prisma, Valibot, Lucia, Clerk, and much more, as we experimentally attempt to combine all vital and widely-used tech.

dieptx/relivator

Relivator: The Most Feature-Rich Next.js 14 Starter

How to Install and Get Started

Project Features Checklist

Project Commands

About the Project

Environment Variables (.env file)

Stripe Payments

Database Support

Additional Notes About Stripe

Internationalization

Design Decisions, Code Insights, Recommendations

Migration from Other Starters to Relivator

Contributing and Credits

Project License

Environment Variables (`.env` file)