nextacular / nextacular

An open-source starter kit that will help you build full-stack multi-tenant SaaS platforms efficiently and help you focus on developing your core SaaS features. Built on top of popular and modern technologies such as Next JS, Tailwind, Prisma, and Stripe.

Nextacular🌙

Quickly launch multi-tenant SaaS applications

An open-source starter kit that will help you build full-stack multi-tenant SaaS platforms efficiently and help you focus on developing your core SaaS features. Built on top of popular and modern technologies such as Next JS, Tailwind, and Prisma

Features packaged out-of-the-box: Authentication, Billing & Payment, Database, Email, Custom Domains, Multi-tenancy, Workspaces, and Teams

Live Demo

Nextacular Demo: https://demo.nextacular.co

Documentation

Nextacular Documentation: https://docs.nextacular.co

Getting Started

Read the quick start here: https://docs.nextacular.co/getting-started/quick-start

One-Click Deploy to Vercel 🚀

Deploy to Vercel for free!

You might encounter errors after deployment, so make sure you add the necessary Environment Variables

Read the docs for more details

Outstanding Features

• 🔐 Authentication
• 💿 Database Integration + Prisma (SQL/PostgreSQL)
• 🤝 Teams & Workspaces
• ☁ Multi-tenancy Approach
• 📜 Landing Page
• 💸 Billing & Subscription
• 📱 Simple Design Components & Mobile-ready
• 🔍 SEO Support
• 👾 Developer Experience
• 💌 Email Handling

Tech Stack

Primary

• Next.JS - 13.1.0 (React 18.2.0)
• Tailwind CSS - 3.1.8
• Prisma - 4.4.0
• Vercel

Dependencies

• Headless UI - 1.7.7
• Hero Icons - 2.0.12
• Date FNS - 2.29.3
• Express Validator - 6.14.2
• Micro - 9.4.1
• Next Themes - 0.2.1
• Nodemailer - 6.8.0
• React Copy to Clipboard - 5.1.0
• React Google Analytics - 3.3.1
• React Hot Toast - 2.4.0
• React Top Bar Progress Indicator - 4.1.1
• Slugify - 1.6.5
• Stripe - 10.13.0
• SWR - 1.3.0
• Validator - 13.7.0

Built With Nextacular

Check out these amazing projects built with Nextacular:

1. Nextacular Demo by Nextacular
2. Livebic by Shadrach
3. Vixion Pro Blogging by Mina
4. Living Pupil Homeschool Solutions by Living Pupil
5. MyWS by Ruyi (@monoxruyi/@ruyi12)
6. Trippr AI by Trippr Tech Inc.
7. BuzzBonus by Ram (@rapturt9)
8. MediumFox by CSK (@medfox_73823)

If you have a project built with Nextacular and want to be listed, feel free to reach out to us through our Discord server.

Reviews

Steven Tey - Developer, Vercel It's going to be super helpful for folks to bootstrap their MVPs and get to market faster!

Positive company mission, Easy to use, Cost-effective, Strong feature set

Company Sponsors

Vercel

GitBook - Documentation Sponsor

Your company name could be here. If you wish to be listed as a sponsor, reach out to [email protected]

Contributing

Want to support this project?

1. Consider purchasing from our marketplace (soon)
2. Subscribe to our newsletter. We send out tips and tools for you to try out while building your SaaS
3. If you represent company, consider becoming a recurring sponsor for this repository
4. Submit issues and features. Fork the project. Give it some stars. Join the discussion
5. Share Nextacular with your network

Read the guidelines for contributing

License

All code in this repository is provided under the MIT License

Supporters – Special Mention 🎉 Thank you!

Show some love and support, and be a backer of our project

Kaur Kirikall (@KaurKirikall), Brian Roach, Cien Lim, Chris Moutsos, Fred Guth (@fredguth), Maxence Rose (@pirmax) Sandeep Kumar (@deepsand), Justin Harr (@DasBeasto), Saket Tawde (@SaketCodes), Corey Kellgren, Adarsh Tadimari, Altamir Meister, Abhi Ksinha

Acknowledgement

🙏 Happy to have the support of early adopters and supporters over at Product Hunt, Gumroad, Github, Twitter, and through personal email. Lots of plans moving forward. Thanks to you guys!

nextacular's Issues

payment provider

add new payment provider

• paypal
• cryptos (bitpay, coinbase)
• klarna payments (very popular in europe)
• ...

Add instructions to quick-start to set up database permissions

Describe the bug
The steps on https://docs.nextacular.co/getting-started/quick-start are not completely clear.

To Reproduce
Steps to reproduce the behavior:

1. Look at the steps above
2. There is no indication of how to set up your developer DB
3. If you forget to ALTER USER nextacular CREATEDB; it seems to come up with error:

Error: P3014

Prisma Migrate could not create the shadow database. Please make sure the database user has permission to create databases. Read more about the shadow database (and workarounds) at https://pris.ly/d/migrate-shadow

Expected behavior
Instructions on how to create the Postgres DB. E.g.

CREATE USER nextacular WITH PASSWORD 'nextacular';
CREATE DATABASE nextaculardb WITH OWNER = 'nextacular';
GRANT ALL PRIVILEGES ON DATABASE nextaculardb TO nextacular;
ALTER USER nextacular CREATEDB;

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: N/A
• Version: N/A

Error when attempting to join a workspace from invite URL: Invalid `prisma.member.upsert()`

Describe the bug
Get the following error when trying to join a team:

Invalid `prisma.member.upsert()` invocation:  
{ create: 
  { workspaceId: 'clbcr6ypw0295ey3q176wovx3', 
     email: 'xxx', 
     inviter: 'clbcr6jwp0013ey3qhg6cxygo', 
     status: 'ACCEPTED' 
  }, 
  update: {}, 
  where: { email: 'xxx' ~~~~~ } }  
Unknown arg `email` in where.email for type MemberWhereUniqueInput. 

Did you mean `id`? 

Available args: type MemberWhereUniqueInput 
{    
  id?: String 
  workspaceId_email?: MemberWorkspaceIdEmailCompoundUniqueInput 
} 

To Reproduce
Sign up with account 1, create a workspace.
Sign up with account 2 in a different browser,
Got to team management in the workspace and copy the invite code URL.
In account2's browser go to the invite URL, and click join workspace.
See the error.

Expected behavior
Account joins the workspace successfully

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser Chrome/Safari

Additional context
Running in localhost with railway postgres db.

Some docs content is not visible

In the docs, pages under Overview and Getting Started works fine, they have some content.

But pages under Development Features, Customization and Technology Guide don't have any content.

To Reproduce
Steps to reproduce the behavior:

1. Go to the docs
2. Click any page under Development Features, Customization or Technology Guide

Expected behavior
Visible docs content

Screenshots

NO PROBLEM HERE

PROBLEM: NO CONTENT

Invalid `prisma.workspace.findMany()` invocation error when deploying

Describe the bug

Great repo! This all builds fine and works locally for me - I can set up workspaces and i'm getting the emails with SendGrid, but when I try and deploy it, i'm getting this error - just using the same database environment variables as i'm using locally to connect to my supabase postgres instance:

21:48:31.363 | PrismaClientInitializationError:
21:48:31.364 | Invalid prisma.workspace.findMany() invocation:
21:48:31.364 |  
21:48:31.364 |  
21:48:31.365 | Error querying the database: db error: FATAL: server login has been failing, try again later (server_login_retry)
21:48:31.366 | at Zr.handleRequestError (/vercel/path0/node_modules/@prisma/client/runtime/library.js:171:6688)
21:48:31.366 | at Zr.handleAndLogRequestError (/vercel/path0/node_modules/@prisma/client/runtime/library.js:171:5948)
21:48:31.366 | at /vercel/path0/node_modules/@prisma/client/runtime/library.js:174:3087
21:48:31.367 | at async /vercel/path0/node_modules/@prisma/client/runtime/library.js:174:3268 {
21:48:31.367 | clientVersion: '4.11.0',
21:48:31.367 | errorCode: undefined
21:48:31.367 | }
21:48:31.368 |  
21:48:31.368 | > Build error occurred
21:48:31.373 | Error: Failed to collect page data for /_sites/[site]
21:48:31.373 | at /vercel/path0/node_modules/next/dist/build/utils.js:1055:15 {
21:48:31.373 | type: 'Error'
21:48:31.374 | }
21:48:31.444 | Error: Command "npm run build" exited with 1
21:48:31.870 | BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

To Reproduce
Following the Nextacular setup instructions...

Account deactivation doesnt work properly

When someone deactivates their account by going to /account/settings it just says Account has been deactivated!
If you refresh the page, everything still loads, it should remove user and redirects to a page, either home or sign in

Add a database seeding script

Would you consider adding a seeding script for initially populating the database with data, i.e. with sample users/members.
I think this would greatly improve the developer experience.

A possible solution would be to add a seed.js file in the /prisma folder that every dev can run if they want or maybe automatically with prisma migrate.
What do you think?

Domain Creation / Verification

If your domain is handled by a different provider (even by Vercel) and you want to connect a subdomain to it, there needs to be a verification process using a TXT record to verify ownership of the domain

An example of this is my blog site

• domain is in Vercel (arjayosma.com)
• my blog is in Vixion.pro
• I added a blog.arjayosma.com in domain management to point into my Vixion workspace (arjayosma.vixion.pro)
• blog.arjayosma.com could not be added and could not be accessed because ownership of the domain needs to be verified
• behind the scenes, a specific TXT record (name: _vercel, value: ...) is to be added to my domain (arjayosma.com) in order for it to route arjayosma.vixion.pro -> blog.arjayosma.com

Upgrade to React 18

Is your feature request related to a problem? Please describe.
For integrating other nextjs stuff on React 18, it would be nice to have this upgraded.

Describe the solution you'd like
Upgrade to React 18.

Describe alternatives you've considered
Using React 17 or having a directory within my project on React 18 is a pain.

Add a License

Please don't forget to add a license.

proper authentication validation

When user is not authenticated and access certain urls directly, we will get 500 error
https://demo.nextacular.co/account/settings

error is coming from here

refine.dev like

maybe we can start a discuss, how we can make nextacular easy for developing.

• cli for devs
• crud tpl
• components and providers

do you have any plans on this?

Accessing direct url show account pages

If you access the link directly without login you can see partial account pages
https://demo.nextacular.co/account

Button mouse pointer wrong over label

Describe the bug
Default mouse point appears when hovering gray button label, instead of link pointer.

To Reproduce
Steps to reproduce the behavior:

1. Hover "Blog" in the landing page.
2. Pay attention to the difference of pointer when the mouse is over the label versus when it is not.

Expected behavior
A link pointer all over the button.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS Monterey 12.3
• Browser: Chrome
• Version: Version 99.0.4844.83 (Official Build) (arm64)

migrate to typescript

Typescript is already the defacto mainstream for any serious project out there, i'm not sure why it's not written in typescript in the first place. It's still not too late to start migration piece by piece before the project gets too large.

Warning: Can't perform a React state update on an unmounted component.

Console log error for the login page

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Login@webpack-internal:///./src/pages/auth/login.js:112:77

caused by this

nextacular/src/pages/auth/login.js

Lines 38 to 49 in 3f3418e

	useEffect(() => {
	(async () => {
	const socialProviders = [];
	const { email, ...providers } = await getProviders();
	for (const provider in providers) {
	socialProviders.push(providers[provider]);
	}
	setSocialProviders([...socialProviders]);
	})();
	}, []);

White page on refresh

Workspace on refreshing the page shows a blank white page even when the user is logged in. (and shows a blank black page when tried in incognito mode)

Expected behaviour: should show the workspace contents upon validating the session. Should return a 404 page if the session is not found (eg: incognito mode or user not logged in).

Replicate the behaviour: goto locahost:3000/account/someworkspace and refresh your page in the browser

Login page with username and password?

Is it possible to add the login page with username and password instead of magic link?
something like this
https://ui.supabase.io/components/auth

alternative domain provider

now everything is handled by vercel, but there are much more domain/dns providers.

• cloudflare (best)
• namecheap
• godaddy
• ...

How would authentication for sub/custom domain site users work?

For example, if the purpose of a multi-tenant system is to have tenants with unique sub/custom domains that themselves are SAAS web apps which require user authentication, payment services etc. How can it be implemented?

Can you guys update this in the given template? If you can please advise me on the matter about how it can be done so that I can work on this as well.

directus dataprovider

would be cool to have directus as a data/authprovider.

https://github.com/directus/examples
https://github.com/directus/examples/tree/main/nextjs