Shirt Shop — Feature Flags using Next.js
Ecommerce product page example using Next.js, @vercel/flags, and @vercel/toolbar to test showing free shipping and summer deal banners.
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
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.
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:
Clone and Deploy
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/shirt-shop
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).
Acknowledgements & Credits
Thanks to following for a delightful demo:
- Tailwind UI ecommerce product page example
- Images provided by Ugmonk
Shirt Shop — Feature Flags using Next.js
Ecommerce product page example using Next.js, @vercel/flags, and @vercel/toolbar to test showing free shipping and summer deal banners.
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
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.
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:
Clone and Deploy
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/shirt-shop
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).
Acknowledgements & Credits
Thanks to following for a delightful demo:
- Tailwind UI ecommerce product page example
- Images provided by Ugmonk