B2B-88: fix README and add package manager restriction

This commit is contained in:
devmc-ee
2025-06-09 10:53:54 +03:00
parent 2e91b074ac
commit 37cbeb8214
4 changed files with 43 additions and 98 deletions

View File

@@ -9,7 +9,6 @@
## Project Structure
```
/apps/web/
/app
/home # protected routes
/(user) # user workspace

133
README.md
View File

@@ -1,104 +1,47 @@
<a href="https://demo-nextjs-with-supabase.vercel.app/">
<img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
<h1 align="center">Next.js and Supabase Starter Kit</h1>
</a>
<p align="center">
The fastest way to build apps with Next.js and Supabase
</p>
## Prerequisites
"node": ">=20.0.0",
"pnpm": ">=9.0.0"
<p align="center">
<a href="#features"><strong>Features</strong></a> ·
<a href="#demo"><strong>Demo</strong></a> ·
<a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
<a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
<a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
<a href="#more-supabase-examples"><strong>More Examples</strong></a>
</p>
<br/>
## Project structure
```
/ app - pages
/ components - custom components, helper components that not provided by any package. Place to extend an redefine components from packages
/ config - bunch of configs, that are provided by starter kit.
/ content - (temporary?) - to be removed when cleaned all dependencies
/ fonts - (temporary) - contains fonts, should be relocated to another place (maybe public)
/ lib - diffirent libs, services, utils
- fonts.ts - project fonts setup, which becomes available as a global css variable
/ i18n - translations/localization setup
/ public - public assets
/ locales - translations under a corresponding local - at a specific namespace
/ styles - all styles of the projects, including tailwind variable setup
- global.css - Global styles for the entire application, a place where should apply variables to global selectors
- shadcn-ui.css - A place where all global variables are defined for color, sizes and etc, that are used in theme.css. Variables defined here and in theme.css are available as tailwindcss property-class
- theme.css - more specific variables, available as tailwindcss property-class
- makerkit.css - Makerkit-specific global styles
- markdoc.css - Styles for Markdoc Markdown files.
-
/ supabase - primary supabase
/ supabase copy - (temporary) a folder from starter with bunch of settings for database and emailing, that should be migrated to the primary supabase to enable some functionality like mfa, super-admin and etc. After it is done, the folder will be removed
/ tooling - a workspace package, used for generation packages in node_modules and provides global links for its data. The most important is typescript config
/ utils
## Features
- Works across the entire [Next.js](https://nextjs.org) stack
- App Router
- Pages Router
- Middleware
- Client
- Server
- It just works!
- supabase-ssr. A package to configure Supabase Auth to use cookies
- Styling with [Tailwind CSS](https://tailwindcss.com)
- Components with [shadcn/ui](https://ui.shadcn.com/)
- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
- Environment variables automatically assigned to Vercel project
```
## Demo
You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/).
## Migration from old structure
```bash
pnpm clean
pnpm i
```
## Deploy to Vercel
## Adding new dependency
Vercel deployment will guide you through creating a Supabase account and project.
```bash
pnpm add <pacakge-name> -w
```
After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This+starter+configures+Supabase+Auth+to+use+cookies%2C+making+the+user%27s+session+available+throughout+the+entire+Next.js+app+-+Client+Components%2C+Server+Components%2C+Route+Handlers%2C+Server+Actions+and+Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png)
The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.
If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).
## Clone and run locally
1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new)
2. Create a Next.js app using the Supabase Starter template npx command
```bash
npx create-next-app --example with-supabase with-supabase-app
```
```bash
yarn create next-app --example with-supabase with-supabase-app
```
```bash
pnpm create next-app --example with-supabase with-supabase-app
```
3. Use `cd` to change into the app's directory
```bash
cd with-supabase-app
```
4. Rename `.env.example` to `.env.local` and update the following:
```
NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
```
Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api)
5. You can now run the Next.js local development server:
```bash
npm run dev
```
The starter kit should now be running on [localhost:3000](http://localhost:3000/).
6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete `components.json` and [re-install shadcn/ui](https://ui.shadcn.com/docs/installation/next)
> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.
## Feedback and issues
Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
## More Supabase examples
- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)
## Supabase
TODO

View File

@@ -102,5 +102,9 @@
"last 1 versions",
"> 0.7%",
"not dead"
]
],
"engines": {
"node": ">=20.0.0",
"pnpm": ">=9.0.0"
}
}

View File

@@ -8,7 +8,6 @@
@layer base {
:root {
--font-sans: var(--font-sans) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-heading: var(--font-heading);