Skip to content
Avatar of vercelvercel/shirt-shop

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.

Framework
Use Case
Shirt Shop template thumbnail

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:

Shirt Shop template thumbnail
Avatar of vercelvercel/shirt-shop

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.

Framework
Use Case

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:

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential