Next.js x Fourthwall

Launch your Fourthwall storefront as a high-perfomance, server-rendered Next.js App Router ecommerce application.

⚡️ Live Demo

📚 API docs

Getting started

There are a few prerequisites to get started with Fourthwall's Storefront API.

1. Set up a store on Fourthwall.

2. Make some products and create a collection.

3. After you have signed up, get a storefront token.

4. Fill out the environment variables below in .env.local.

NEXT_PUBLIC_FW_STOREFRONT_TOKEN="<your storefront token>" # Example: ptkn_...

NEXT_PUBLIC_FW_CHECKOUT="<your store url>" # Example: vercel-shop.fourthwall.com. Used for checkout
NEXT_PUBLIC_VERCEL_URL="<the url of your vercel site>" # Example: fw-commerce.vercel.app. This is used for sitemap.xml + robots.txt.

# Optional
NEXT_PUBLIC_FW_COLLECTION="<the handle of your collection>" # If you want to display a specific collection. See Resources for more details on how to get the collection handle.

Develop locally

You will need to use the environment variables defined in .env.example to run Next.js Commerce. It's recommended you use Vercel Environment Variables for this, but a .env.local file is all that is necessary.

Note: You should not commit your .env.local file or it will expose secrets that will allow others to use your Fourthwall store.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
3. Download your environment variables: vercel env pull

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

Deploying

After cloning the repo with the Deploy with Vercel button above, you will need to set the environment variables.

git clone _your repo_ # your repo that you set up with Deploy with Vercel

vercel # From your repo directory. Links to your project

vercel # Initializes the project
vercel env add NEXT_PUBLIC_FW_COLLECTION
vercel env add NEXT_PUBLIC_FW_STOREFRONT_TOKEN
vercel env add NEXT_PUBLIC_FW_CHECKOUT
vercel env add NEXT_PUBLIC_VERCEL_URL

vercel --prod # Deploys to production

Resources

• How to get your collection handle.
• Style your store for the checkout flow.