Next.js x Fourthwall
A high-perfomance, server-rendered Next.js App Router ecommerce application.
Create a store, get a storefront token
A storefront token is a public access token that allows you to pull product data from your Fourthwall store. To get a storefront token:
-
Set up a store on Fourthwall.
-
(optional) Style your store for the checkout flow.
-
After you have signed up, get a storefront token.
-
Fill out the environment variables below in .env.local.
NEXT_PUBLIC_FW_API_URL="https://api.fourthwall.com"
NEXT_PUBLIC_FW_COLLECTION="<the handle of your collection>" # Example: launch. This is available at the details page for the collection. See below for more details.
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.
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.localfile or it will expose secrets that will allow others to use your Fourthwall store.
- Install Vercel CLI:
npm i -g vercel - Link local instance with Vercel and GitHub accounts (creates
.verceldirectory):vercel link - Download your environment variables:
vercel env pull
pnpm install
pnpm dev
Your app should now be running on localhost:3000.
Deploying
vercel # Initializes the project
vercel env add NEXT_PUBLIC_FW_API_URL # Will prompt you for the value
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
-
Visit the API docs here.
-
How to get your collection handle.