wharvex / relivator

Next.js 14: Store, Landing, Admin Dashboard ▲ i18n, Stripe, Shadcn Tailwind, Drizzle Zod Trpc TypeScript Auth Page, Lucide CSS Radix UI, Responsive React Server Components, MySQL and Neon Postgre TS ORM, Intl App Router, Mdx Docs User Actions Kit, SaaS Commerce Shop Pricing Payments, Dark Mode, Modern Full Stack, Free ▲ more stars → more features

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

1. Essential Tools: Ensure that VSCode, Git, GitHub Desktop (Windows/macOS | Linux), and Node.js LTS (Windows/macOS | Linux) are installed.
2. Project Cloning: Create a new fork and use GitHub Desktop to download it.
3. 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.
4. 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.
5. 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

• Utilized Next.js 14, React 18, TailwindCSS, and TypeScript serve as the project's core technologies.
• Implemented authentication through both Clerk and NextAuth.js.
• Unleashed extensive internationalization in 9 languages (English, German, Spanish, French, Hindi, Italian, Polish, Turkish, Ukrainian), using next-intl.
• Undertook Drizzle ORM, utilizing both MySQL and PostgreSQL databases, and PlanetScale/Neon/Vercel/Railway services.
• Successfully configured next.config.mjs with i18n and MDX support.
• Strived for thorough documentation and a beginner-friendly approach throughout the project.
• Skillfully configured and commented on middleware.ts for i18n and next-auth.
• Provided exemplary VSCode settings and recommended extensions.
• Optimized the Next.js Metadata API for SEO, integrating file-system handlers.
• Integrated a TailwindCSS screen size indicator for local project runs.
• Established a user subscription and checkout system using Stripe.
• Ensured type-safety validations for project schemas and UI fields using Zod.
• Employed EsLint and Prettier to ensure the code is safe and readable.
• Elegantly executed the font system, utilizing Inter and additional typefaces.
• Developed a storefront, incorporating product, category, and subcategory functionality.
• Designed a modern, cleanly composed UI using Radix, with attractive UI components from shadcn/ui.
• Composed a comprehensive, beginner-friendly README.md, including descriptions of environment variables.
• Blog functionality realized through the use of MDX files.
• Implemented tRPC and TanStack Query for server and client data fetching.
• Use absolute paths where applied.
• Use Kysely with Drizzle to achieve full TypeScript SQL query builder type-safety.
• Translate README.md and related files into more languages.
• Transform beyond a simple e-commerce store to become a universal website starter.
• Tidy up package.json with correctly installed and orderly sorted packages in dependencies and devDependencies.
• The project author should publish a series of detailed videos on how to use this project. There should also be some enthusiasts willing to publish their own videos about the project on their resources.
• Reduce the number of config files as much as possible.
• Reduce HTML tag nesting and ensure correct usage of HTML tags whenever possible.
• Prioritize accessibility throughout, for both app user UI (User Interface) and UX (User Experience), as well as developers' DX (Developer Experience). Maintain usability without compromising aesthetics.
• Prefer function over const for components to maintain clean and beginner-friendly code.
• Optimize all app elements to improve dev cold start and build speeds.
• Manage email verification, newsletter sign-ups, and email marketing via Resend and React Email.
• Make certain environment variables optional, allowing the app to operate without them, simply omitting specific code sections as necessary.
• Keep the project free from @ts-expect-error and related not very type-safety things.
• Keep the cookie count as low as possible, prepare for a cookie-free future, and implement cookie notifications.
• Introduce a comment system for products, including Review and Question types.
• Integrate valuable insights from Next.js Weekly into this starter.
• Implement file uploads using UploadThing and Cloudinary.
• Implement dynamic switching between app features, like database provider, by making corresponding checks for environment variables.
• Implement AI features and chat, using, for example, Vercel AI SDK (see: Introducing the Vercel AI SDK).
• Implement advanced theme switching without flashing, utilizing Tailwind Dark Mode with React Server Side support and dynamic cookies.
• Implement Jest testing, optimized for Next.js.
• Implement CLI to quickly get Relivator with selected options only.
• Guarantee that every possible page is enveloped using predefined shell wrappers.
• Generously comment throughout your code, while keeping it clean.
• Fully develop advanced sign-up and sign-in pages, integrating both social media and classic form methods.
• Follow recommendations from Material Design 3 and other design systems when relevant.
• Establish, document, and adhere to conventions, such as maintaining a single naming case style for files and variables.
• Establish a comprehensive i18n, using country and locale codes, and support even more languages. Ensure native speakers verify each language following machine translation. Consider to use the next-international library.
• Ensure ultimate type safety using strict mode in TypeScript, typedRoutes, Zod, middleware, etc.
• Ensure the project lacks any unused items, including packages, libraries, variables, etc.
• Ensure full Next.js Edge support and compatibility.
• Ensure full Bun support and compatibility.
• Ensure all website languages are grammatically correct and adhere to the latest rules for each language.
• Ensure all items in the project are sorted in ascending order unless different sorting is required elsewhere.
• Ensure accessibility for users, developers (both beginners and experts), bots (like Googlebot or PageSpeed Insights Crawler), for everyone.
• Enhance middleware.ts configuration with multi-middleware implementation.
• Employ all relevant TanStack libraries.
• Elegantly configure app.ts, offering a single config to replace all others.
• Develop workflows for both sellers and customers.
• Develop an advanced storefront featuring products, categories, and subcategories.
• Develop an advanced 404 Not Found page with full internationalization support.
• Develop advanced sign-up, sign-in, and restoration using email-password and magic links.
• Develop an even more sophisticated implementation of user subscriptions and the checkout system via Stripe.
• Decrease file count by merging similar items, etc.
• Create the most beginner-friendly and aesthetically pleasing starter possible.
• Create an advanced notification system, inclusive of toasters, pop-ups, and pages.
• Create a new landing page with a distinctive design and update components, plus fully redesign all other pages and components.
• Confirm the project is free from duplicates, like files, components, etc.
• Conduct useful tests, including possible stress tests, to simulate and assess app performance under high-traffic conditions.
• Comprehensively configure Next.js 14 App Router, with API routes managed by Route Handlers, including the RSCs and all other new features.
• Complete the BA11YC (Bleverse Accessibility Convention) checklist.
• Complete parts of the BA11YC (Bleverse Accessibility Convention) checklist.
• Boost app performance scores on platforms like Google PageSpeed Insights. Ensure the app passes all rigorous tests.
• Apply the next-usequerystate library where appropriate (read the article).
• Add some interesting and useful types to the project, for example, using the type-fest library.
• Add pop-ups for cookies/GDPR notifications (with a respective management settings page), and Google floating notifications for quick login, etc.
• Add an admin dashboard that includes stores, products, orders, subscriptions, and payments.
• Add advanced indicators for installed packages, environment variables, and improvements to TailwindCSS screen sizes.

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:

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

Recommended Things to Learn:

1. Relivator: Next.js 14 Starter (Release Announce of Relivator on Medium) by Nazarii Korniienko @Blefnk
2. Welcome to the Wild World of TypeScript, Mate! Is it scary? by Nazarii Korniienko @Blefnk
3. Thoughts on Next.js 13, Server Actions, Drizzle, Neon, Clerk, and More by @Apestein
4. Huge Next-Multilingual Readme About i18n by @Avansai

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:

1. Begin by reading the "How to Install and Get Started" section on the top of this repository, and by reading CONTRIBUTING.md page.
2. Create a branch: git checkout -b <branch_name>.
3. Make and commit your changes: git commit -m '<commit_message>'
4. Push to the original branch: git push origin <branch_name>
5. 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

---

Follow Us Everywhere: GitHub | Twitter/𝕏 | Discord | Fiverr | LinkedIn | Facebook

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.