Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vercel/shirt-shop
An example repository showing how to use @vercel/flags with Next.js.
https://github.com/vercel/shirt-shop
nextjs reactjs vercel
Last synced: 9 days ago
JSON representation
An example repository showing how to use @vercel/flags with Next.js.
- Host: GitHub
- URL: https://github.com/vercel/shirt-shop
- Owner: vercel
- Created: 2024-05-15T13:46:06.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-26T16:24:41.000Z (4 months ago)
- Last Synced: 2024-10-29T17:18:06.370Z (16 days ago)
- Topics: nextjs, reactjs, vercel
- Language: TypeScript
- Homepage: https://shirt-shop.labs.vercel.dev
- Size: 3.46 MB
- Stars: 21
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shirt Shop
## A `@vercel/flags/next` example
This example shows how to use `@vercel/flags` for Next.js applications.
This application requires a `FLAGS_SECRET` environment variable.
You can generate one with this command
```sh
node -e "console.log(crypto.randomBytes(32).toString('base64url'))"
```
When running locally, you will need to run `vercel link` to link one of your Vercel projects. The environment variable mentioned above need to be defined on the linked project in the Vercel dashboard. Run Having them in local `.env` files is not enough.
- [Documentation](https://vercel.com/docs/workflow-collaboration/feature-flags/flags-pattern-nextjs)
- [Live Demo](https://shirt-shop.labs.vercel.dev/)
## How to Use
You can choose from one of the following two methods to use this repository:
### One-Click Deploy
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=shirt-shop):
[](https://vercel.com/new/clone?repository-url=https://github.com/vercel/shirt-shop&project-name=shirt-shop&repository-name=shirt-shop&env=FLAGS_SECRET)
### Clone and Deploy
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:
```bash
pnpm create next-app --example https://github.com/vercel/shirt-shop
```
Next, run Next.js in development mode:
```bash
pnpm dev
```
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=shirt-shop) ([Documentation](https://nextjs.org/docs/deployment)).
## Acknowledgements & Credits
Thanks to following for a delightful demo:
* [Tailwind UI ecommerce product page example](https://tailwindui.com/components/ecommerce/page-examples/product-pages)
* Images provided by [Ugmonk](https://ugmonk.com/)