Relivator v1.0.0 is released! Now it's stable and ready for production! ๐ If you have used the project before, please double check your ENV file. NextAuth.js, PostgreSQL and next-intl are now used (instead of Clerk, MySQL and next-international).
Discord | Twitter/๐ | GitHub | Fiverr | LinkedIn | Facebook
Jump to Project Features Section | Jump to Environment Variables Section
GitHub Goals Progress:
- 100 Stars: 90% [โฒโฒโฒโฒโฒโฒโฒโฒโฒ_]
- 20 Forks: 75% [โฒโฒโฒโฒโฒโฒโฒ___]
We craft the world's most featured, global, and iconic Next.js starter template! It's really huge! Step into the future with this ultimate Next.js starter! Beautifully created with โค๏ธ Next.js 13 template by @blefnk Nazarii Korniienko, Bleverse, and its the most gorgeous, entire OSS community. The starter is perfectly opinionated and has i18n, means internationalization, and built with app router
and server actions
using TypeScript
programming language. Everything has been set up for you. It's more than just code; it's a journey. You're not on this journey alone. Download it and move really faster than ever, than anyone!
When you give us the star on this repo and introduce yourself in the Discord Channel of the project, you take part in a lotteries where the 5 randomly selected persons will win the early-access to some secret Relivator features! โญ The first gift contest will be started once we reach 100 stars and have at least 5 users participate in the "Relivator 100 Stars" thread (just say hello or tell something about yourself there). This thread can be found in the bleverse-events
channel on our Discord server. โจ More stars lead to more features!
๐ฅ We are growing so fast! Many thanks to everyone for the stars! Here are the stargazers over time:
We've laid the groundwork; now, grab it, dive in and accelerate your development. This is the space where we're playing with everything new in Next.js 13. Stumbled upon something? Use repository discussions, raise an issue right here, or DM us on ๐/Twitter @blefnk. Btw, project takes some inspirations from T3 and similar stacks. Our own stack beside other includes also many more other things. Just get it and enjoy! And remember! We love your feedback. We love your stars. So smash it, please! And make your forks! It helps the project to be even coolest! If you've got some coding magic up your sleeve, contributions are always celebrated! ๐
๐ Article on Medium about this Project (updates soon)
Note This README tries to be really useful. By this reason it requires many of text. It means the some of text may be outdated, and will be updated as we scaling. So please let us know on the discussion page if you notice any minor issues in the project, such as outdated information, broken links, grammatical or spelling mistakes etc. in the README.md or another files.
You can also check our another free Next.js 13 starter. This one starter, a monorepo, offers you tech used in the current starter plus also: Turborepo/Turbopack, Prisma, Valibot, Lucia, Clerk, and much more. It means there we're very experimentally trying to implement all the important and most used tech together.
The project has a huge plans! So we are very appreciate any help! Here is the things for the people, who are searching to make their own commits, like GitHub beginners.
Currently we are very interested in the help with:
- README.md needs to be fully improved.
- Some toaster notifications doesn't work.
- Sometimes next-intl error is randomly shown in console.
- Stripe is not fully finished and may not work in some places.
You can also use Cmd/Ctrl+Shift+F
in VSCode to search for todo:
.
Please check Commits tab to see another things where help is needed.
Besides it, check the v2.0.0-v3.0.0 Project Roadmap below to get know what things can be implemented in this Next.js starter.
This roadmap outlines the key features and improvements to be implemented in this Next.js starter. If mistakes here, please create an issue.
- ๐ Next.js 13.5, React 18, and TypeScript 5 used as core.
- โ
Perfectly configured
next.config.mjs
with i18n and mdx support implementation. - ๐ Everything is tried to be as well-documented as possible, and beginner-friendly.
- ๐งฑ Nicely configured and explained
middleware.ts
for i18n and next-auth. - ๐ญ Cleanly composed modern user interface, built with Radix and stunning UI components, all thanks to shadcn/ui and @auth/drizzle-adapter..
- ๐ Comprehensive implementations for i18n, means internationalization, with 8 languages included, using next-intl, some things from next-international, but in the future we want to use our very own solutions.
- ๐ฆซ Drizzle ORM and DrizzleKit configured for serverless-first environments, for services like Neon and Vercel Postgres.
- ๐ฆบ Usage of Cuid2 to automatically generate collision-free modern IDs in the database models.
- ๐ Data fetching, which works on server and client, using tRPC & TanStack Query.
- โณ๏ธ Awesomely crafted VSCode settings and recommended extensions.
- ๐ฟ Authentication via NextAuth (previously known as NextAuth.js and next-auth) with account linking implementation.
- ๐๏ธ Implementation of storefront with products, categories, and subcategories.
- ๐งซ Indicator implementation for TailwindCSS screen sizes.
- ๐ฐ Implementation of user subscriptions and checkout system via Stripe.
- ๐ฎ Optimized Next.js Metadata API for SEO handling, with file-system handlers.
- ๐ป Blog implementation by using MDX files.
- ๐ Well written
README.md
, and is beginner-friendly first, including descriptions for the environment variables. - ๐คฉ Using TailwindCSS for utility-first CSS.
- ๐ฆฆ Using EsLint with Prettier for readable, safe code.
-
๐ ฐ๏ธ The beautiful implementation of font system, using Inter and other typefaces. - ๐ Type-safety validations for project schemas and UI fields via Zod.
This roadmap outlines the key features and improvements to be implemented in this Next.js starter. Not marked things may be already configured, but was not tested too much. If mistakes here, please create an issue.
- ๐ฆพ Partially complete BA11YC (Bleverse Accessability Convention) checklist and Relivator's own checklist section (find it below for
1.0.0
-2.0.0
). - ๐ง Full Bun support and compatibility.
- ๐ Advanced implementation of user subscriptions and checkout system via Stripe.
- ๐ฌ Advanced implementation of storefront with products, categories, and subcategories.
- ๐ค Implement AI features and chat, using e.g Vercel AI SDK, to this starter (read: Introducing the Vercel AI SDK).
- ๐ฉ๏ธ Full Next.js Edge things support and compatibility.
- ๐ Comment system for products, in types of Review and Question.
- ๐ Advanced notification system, like toaster, pop up, and page.
- ๐ Advanced 404 Not Found page with full internationalization support.
- ๐ชช Advanced sign-up/sign-in/restoring by using email-password and magic-links.
- ๐๏ธ Try to optimize everything in the app to make also faster dev cold start and build.
- ๐ช Use Kysely with Drizzle to get the full type-safety for TypeScript SQL query builder.
- ๐ Implement some useful tests, including if possible stress-tests to simulate and check app performance, when many people uses the app at one time.
- ๐ Minimal how it's possible HTML tags nesting. And also correct ways of using HTML tags.
- โ๏ธ Beautifully configured
app.ts
, a single config to replace them all. - โ๏ธ Gorgeously written comments everywhere, keeping the code still clean.
- ๐ Nicely configured
package.json
with correctly installed and sorted packages independencies
anddevDependencies
. - โจ Admin dashboard with stores, products, orders, subscriptions, and payments.
- โจ๏ธ Advanced indicators implementations for installed packages, environment variables, and improvements to TailwindCSS screen sizes.
- ๐ฆ Project is clean from duplicates, like files, components, etc.
- ๐ฌ๏ธ Advanced theme switching without flashing, using Tailwind Dark Mode with React Server Side support and dynamic cookies.
- โฌ๏ธ File uploads implementation using UploadThing and Cloudinary.
- ๐๏ธ Everything in the project is sorted in ascending order, unless a different sort is required somewhere.
- ๐ Comprehensive configured Next.js 13 App Router, API routes handled by Route Handlers, with the RSCs and everything all new.
- ๐ซ Use where it make sense the next-usequerystate library (read the article).
- ๐ Using every usable TanStack libraries.
- ๐ Even more comprehensive i18n implementation, with using country and locale codes, supporting 20 languages. Every language must be verified by native speakers after machine translation.
- ๐ Clean from any of unused things, like packages, libs, vars, etc.
- ๐ช Minimal possible number of cookies, to be ready for cookie-free future, with cookie notification implementation.
- โญ Complete advanced sign up and sign in pages both with socials and classic form methods.
- ๐ง The most beginner-friendly and prettyful starter, how it's possible.
- ๐ฆ Every possible page is wrapped using predefined shell wrappers.
- โ๏ธ Project is clean from
@ts-expect-error
or similar things. - ๐ญ Minimal number of config files, how it possible.
- ๐ณ Using
function
insteadconst
for components everywhere, to make it more cleaner and beginners-friendly. - ๐ฆ Absolute paths are used wherever it makes sense.
- ๐ณ Jest testing, optimized for Next.js 13.
- ๐ฐ Email verification and newsletter subscription and email marketing via Resend and React Email.
- ๐ค Ultimate type-safety using strict-mode in TypeScript, typedRoutes, zod, middlewares etc.
- ๐ช Pop-ups like: cookies/GDPR notification (with corresponding management settings page), Google floating notification about fast login, etc.
- ๐ค Seller and customer workflows.
- ๐ฆพ Accessability everywhere, for app users UI (User Interface) with UX (User Experience), and for developers DX (Developer Experience). And with usability, but still with beauty in the mind.
- ๐ Better
middleware.ts
configuration with multi-mw implementation. - ๐ชถ All website languages must be free of grammatical and spelling errors and written in accordance with the newest rules of each language.
- ๐ Minimal possible references to Relivator, Bleverse, etc. to be really easy-starter. Using variables from
app.ts
everywhere. - ๐ฏ Maximum possible for the app performance points on services like Google PageSpeed Insights. Also app must pass all hard tests.
This roadmap outlines the key features and improvements to be implemented in this Next.js starter. Not marked things may be already configured, but was not tested too much. If mistakes here, please create an issue.
- ๐ฆฟ Fully completed BA11YC (Bleverse Accessability Convention) checklist.
- ๐ฅ Implement even more feature to be something more than just a e-commerce store to become a starter for all kind of websites.
- ๐ Implement all the useful things from Next.js Weekly into this starter.
- ๐ Discuss, document, and use the conventions about e.g. single naming case style for file and variables.
- โ๏ธ Achieve as few files as possible by combining similar things, etc.
- ๐ Translate README.md and/or similar files into other languages.
The section will be expanded soon.
- ๐ Maximum accessability for users. Accessability for developers, both beginners and seniors. Accessability for bots, like
[Googlebot](https://developers.google.com/search/docs/crawling-indexing/googlebot)
or[PageSpeed Insights](https://pagespeed.web.dev/) Crawler
. Accessability for everyone. - ๐บ Using some interesting recommendations from **Material Design 3 and other design systems.
- Relivator Next.js 13.5: Store | Landing | Dashboard (Template 2023)
- 01. Follow Us Everywhere
- 02. The Bleverse Framework for the Web
- 03. We are Waiting for Your Help
- 04. Project Features | Roadmap | Checklists
- 06. Table of Contents
- 07. Recommendations & Why We Use This And That
- 08. Bun Support & Compatibility
- 09. Internationalization (i18n)
- 10. Project Configuration
- 11. NextAuth.js Authentication
- 12. Environment variables
- 13. Getting Started Locally
- 14. Database
- 15. How to Deploy the Project
- 16. Migration From Similar Starter
- 17. UI components
- 18. Linting / Checking the codebase
- 19. Say Thank You to Them
- 19. Recommended Things to Learn
- 20. Contributing and Credits
- 21. Interesting Things
- 22. License
The section will be improved soon. You can use this service (with GitHub preset selected) if you need to update current README.md
file. VS Code extensions also has good automatic TOC generating.
The section will be implemented soon.
Currently we don't use Contentlayer. It still unstable with Windows. For this reason we currently trying to implement options for choosing to use or not to use Contentlayer in the src/app.ts
configuration file. In the future, maybe, we are develop our very own solution for the content writing. External providers, like Sanity, also possibly will be implemented in the future with corresponding options to enable/disable.
We recommend to clean browser cache and delete .next
folder from time to time, to ensure that if everything works as expected.
08. Bun Support & Compatibility
The Relivator
already can be used with some Bun
awesome features. Currently we recommend to use pnpm
for this starter. We try to ship the full as possible Bun support and compatibility as soon as the Windows binaries will be released.
The section will be expanded soon.
At Bleverse, the approach to multilingualism is a separate Holy Grail. We love to talk about this topic. In the future, we will write a lot of interesting things about Next.js 13 App Router internationalization.
Hint: Use pnpm lint:i18n
to check if your i18n files are okay. It also tries to fix some things if possible with tools e.g. it provides the ascending sort. If you got nothing on output it means everything is okay.
Currently, all languages have machine translation. In the future, we plan to have them checked by native speakers.
Please note that the project currently has i18n messages from another of our open source projects. They will be removed in the next few days.
This section will be expanded accordingly in the future. Stay tuned!
Current Locales (asc sort)
- ๐ฉ๐ช: "German",
- ๐ฌ๐ง: "English",
- ๐ช๐ธ: "Spanish",
- ๐ซ๐ท: "French",
- ๐ฎ๐น: "Italian",
- ๐ต๐ฑ: "Polish",
- ๐น๐ท: "Turkish",
- ๐บ๐ฆ: "Ukrainian",
The src/app.ts
file contains essential configuration used to modify the contents and settings of the website.
- Manage the content displayed on the website.
- Customize various settings, such as disabling the theme toggle.
- Manage general site-wide information.
Setting up auth is easy as a breeze...
The section will be implemented soon.
This section will be more clean and improved soon. Please stay tuned.
Define default values for environment variables required to run the app. Never store secrets in .env.example
file. Store sensitive information in a .env
file only. Do not commit these local env files to source control. If you're new or cloning the repo, use the .env.example
file as a template to create your .env
file. Keep this file current when adding new variables to .env
. Use Caution When Committing. Remember that this file will be committed to version control. Ensure it does not contain secrets. When cloning this repo, create a copy named .env
and add your secrets. When adding new environment variables, update the schema in /src/env.mjs
accordingly.
You can read more about environment variables here.
.env.example
file was simplified so much with the 1.0.0 Relivator release, and will be even more simplified in the next versions. We plan to implement if the specific value is not specified, then the app will still be fine compiled by disabling this env related functional.
๐ข Explanations to .env.example
file (COPY DATA FROM THERE TO NEW .env
FILE)
-
Database
You can get database credentials from Neon or Vercel Postgres. Another PostgreSQL serverless supported providers also may work.
DATABASE_URL="postgresql://<...>"
-
GITHUB_CLIENT_ID="fake"
GITHUB_CLIENT_SECRET="fake"
-
DISCORD_CLIENT_ID="fake"
DISCORD_CLIENT_SECRET="fake"
-
GOOGLE_CLIENT_ID="fake"
GOOGLE_CLIENT_SECRET="fake"
-
SMTP_FROM="fake"
POSTMARK_API_TOKEN="fake"
POSTMARK_SIGN_IN_TEMPLATE="fake"
POSTMARK_ACTIVATION_TEMPLATE="fake"
-
JWTs (@docs) and default site url (use domain in production)
You can generate Auth.js JWTs secret using ConvertSimple.com website.
NEXTAUTH_SECRET="ChangeMeToSomethingRandom"
NEXT_PUBLIC_APP_URL="http://localhost:3000"
-
Resend API Key found at @link We need to register a domain with Resend to send emails from Register a domain at @link Or we can use this email provided by resend for only testing:
EMAIL_FROM="Resend <[email protected]>"
RESEND_API_KEY="re_"
-
These values should be replaced with production keys on the deployed site to accept real payments. Stripe Publishable Key and Secret Key found at @link
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_"
STRIPE_API_KEY="sk_test_"
Stripe Webhook Secret found at @link. The webhook URL should be: https://<INSERT_YOUR_DOMAIN_HERE>/api/stripe/webhookSTRIPE_WEBHOOK_SECRET="whsec_"
Stripe Product and Price IDs for your created products found at @linkSTRIPE_ADVANCED_MONTHLY_PRICE_ID="price_"
Subscription Pricing Stripe Product and Price IDs for your created products found at @linkSTRIPE_BASIC_MONTHLY_PRICE_ID="price_"
-
OTHER
UPLOADTHING_SECRET="sk_live_"
UPLOADTHING_APP_ID="fake"
LOGLIB_API_KEY="site_"
LOGLIB_SITE_ID="_"
Install Git.
https://git-scm.com
Install Node.js.
Windows:
https://github.com/coreybutler/nvm-windows/releases/download/latest/nvm-setup.exe
Linux:
https://github.com/nvm-sh/nvm#installing-and-updating
Install PNPM.
corepack enable
Clone the repository.
git clone https://github.com/blefnk/relivator.git
Get your environment variables in check and update the variables.
cp .env.example .env
Get all dependencies sorted.
pnpm install
Bring your database to life with pushing the database schema.
pnpm db:generate
pnpm db:push
Let the server magic begin! The app will be running at http://localhost:3000.
pnpm dev
Finally, start the Stripe webhook listener for Stripe to work.
pnpm stripe:listen
You can lint the project using pnpm lint
.
You can build also using pnpm build
or pnpm build:tsc
,
pnpm build:tsc
shows you all typescript errors if exist.
And, ladies and gentlemen, it's perfectly ready!
Hint: You can update all project packages to theirs latest stable versions by using pnpm latest
command.
Drizzle ORM in the Relivator is set up to use be ready for serverless environments by default. The project build with PostgresJS and uses [pg](https://orm.drizzle.team/docs/quick-postgresql/node-postgres)
(docs), so any PostgreSQL-like supported database services will work. Everything in the project currently set up serverless using @neondatabase/serverless. Simply set DATABASE_URL
in created by you .env
file and you are ready to go. You can learn more about it in the env related section of this readme.
If you want to use another serverless provider, like Vercel Postgres, just instead of @neondatabase/serverless package use @vercel/postgres everywhere and you can still use [postgres](https://orm.drizzle.team/docs/quick-postgresql/postgresjs)
or [pg](https://orm.drizzle.team/docs/quick-postgresql/node-postgres)
driver in thedrizzle.config.ts
file.
If you need a serverful architecture (which is not recommended and it is the old thing), just remove ``from the app and just use only PostgresJS, and set the driver to [pg](https://orm.drizzle.team/docs/quick-postgresql/node-postgres)
in the`drizzle.config.ts` file.
This project exposes a package.json script for accessing drizzle-kit via pnpm db:<command>
. This script handles all environment variable mapping automatically via dotenv-cli
, so you don't have to think about it. You should always try to use this script when interacting with drizzle-kit locally.
Note: Don't delete any files in migrations
folder manually, please refer to pnpm db:drop command.
2. Making changes to the database schema (learn more)
-
[optional] Make changes to your database by declaring or modifying the
*.ts
files of prototypes insrc/data/db
folder. -
[optional] After declaring or modifying database prototypes you will then use
pnpm db:generate
. -
[recommended] You can run the
pnpm db:push
after a double checking the new generated files in thedrizzle
folder. If something wrong please don't delete the files insidedrizzle
folder by yourself and usepnpm db:drop
instead, manual removing can crash Drizzle, as its developers said. And when you feel comfortable with the changes, you can then send the SQL generated files code to your database provider. Recommended to run this after cloning the repo and creating your new database in the chosen by you database service. -
[optional] For migrations you can use the
pnpm db:migrate
command. Currently @tsx package is used. It will be replaced by Bun when the Windows builds will be featured. And please note: don't add thedrizzle
folder into the.gitignore
, as the developers and users answering on the official Drizzle Discord (#1 | #2). -
[optional] You can generate products for created store by you. In the development environment just use
Generate
button to do this (usingsrc/server/actions/generate.ts
file). In the future you will can also populate your newly created database with some random data by running thepnpm db:seed
command (thesrc/data/env/seed.ts
file is currently under the development).
tRPC is ready to be used with Drizzle schemas. At the moment todos
model made to work with tRPC, but still improvements needed. These todos are planned to be used as checklists on some user's store pages, like shipping management. We can also use this for the Roadmap Changelog
page in the frontend of app with admin privilegies to add, edit and mark things there.
Follow the deployment guides for Vercel, Netlify and Docker for more information. The project was tested only on Vercel, please let us know if you find the issues by using other deployment services.
Know how to migrate your project to the current starter. Migration guides are both for app and pages directories. Your old starter may use Prisma, Zod, and other things.
The content of this section is not yet ready. Check back in a few days. Possible will be moved to the project wiki. Possible stacks: Original Next.js 13 Boilerplate, Original T3 Stack, Shadcn Taxonomy, Vercel Store, SkateShop, OneStopShop, Medusa, and so on.
By default, this project already includes some components from some component libraries, and also unstyled shadcn/ui components. The shadcn/ui even allows you generate the new UI components by using its CLI:
pnpm dlx shadcn-ui@latest add button
Where button
can be any UI element from the project.
To run a full check of the codebase (type-check, lint, prettier, tests), run:
pnpm check
pnpm lint
pnpm type-check
pnpm format
to check for format errors, run:
pnpm format:check
pnpm test
If you've ever wondered which Next.js starter to choose for your next project, especially when it comes to scaling an online store, whether it's Vercel Store, SkateShop, OneStopShop, Taxonomy/nextflix, Medusa, and so on, โ then stop right here.
But if you need a MONSTER, a tool for all life situations, then Relivator is definitely what you need to fork or use as template right now! Relivator already includes a lot of things from all those starters, and even-even more! It aims to break all possible boundaries of Next.js and React capabilities. With Relivator, your hands are completely free.
All of these projects are incredibly amazing, and if you're into minimalism, we're highly recommend checking them out โค๏ธ. The creators of these starters are super-mega-cool people, and we're endlessly thank them all ๐; without them, this starter wouldn't exist.
- Relivator: Next.js 13 Starter (Release Announce of Relivator on Medium) by Nazarii Korniienko @Blefnk
- Welcome to the Wild World of TypeScript, Mate! Is it scary? by Nazarii Korniienko @Blefnk
- Thoughts on Next.js 13, Server Actions, Drizzle, Neon, Clerk, and More by @Apestein
You can find more sources to learn in the files of the current repository. This section will be extended in the future.
Contributions are welcome! We thank everyone for their contributions to this repository. Your contributions will be acknowledged. Please open an issue if you have any questions or suggestions. See the contributing guide for more information.
Please visit this special wiki page to see the full list of credits and contributors.
To contribute to Bleverse Relivator, follow these steps:
The section will be improved with describing the more easier steps to make it all ready.
- Please read CONTRIBUTING.md page first.
- Fork our use as template this repository.
- Create a branch:
git checkout -b <branch_name>
. - Make your changes and commit them:
git commit -m '<commit_message>'
- Push to original branch:
git push origin <project_name> / <local>
- Create the pull request.
Or, see the GitHub docs on how to create a pull request.
- Use
function
insteadconst
for components, where possible.
The section will be expanded soon.
We try to make this starter accessible to every beginner and advanced developer, so you can often find interesting points about certain things in the comment blocks, as well as entire separate sections at the bottom of some files. Feel free to join in to add your own interesting things or improve on existing ones!
The section will be implemented soon.
- pnpm dev
- .env
- middleware.ts
- ...
The author of this project, @blefnk, was teleported to the central universe of the Bleverse, short for the Blefonix Multiverse. There, he met a few individuals who informed him that this central universe is known as Relivator. A rumor circulates that within Relivator exists a tree. Those who have seen this tree claim to have heard echoes that sounded like rรฉ-li-vรก-to
, which inspired both the name of the tree and of Relivator itself. The author is also writing a book based on the stories told to him by the inhabitants of Relivator and the entire Bleverse. An excerpt from this book will soon be available in its own repository.
This project is MIT-licensed and is free to use and modify for your own projects. Check the LICENSE.md file for details.
It was created by @blefnk Nazarii Korniienko, Bleverse, and its OSS community. We thanks so much for all the contributions and support made by everyone for this project.
Happy coding! Embark on this coding adventure, learn, iterate, and most importantly โ enjoy the process! And remember โ this is a space of learning and experimentation. Dive in and enjoy the journey! ๐๐