mirror of
https://github.com/vercel/commerce.git
synced 2025-05-13 21:27:50 +00:00
66 lines
3.1 KiB
Markdown
66 lines
3.1 KiB
Markdown
# Next.js x Fourthwall
|
|
|
|
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
|
|
|
|
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:
|
|
|
|
1. [Set up a store](https://fourthwall.com/get-started) on Fourthwall.
|
|
|
|
2. [Make some products](https://my-shop.fourthwall.com/admin/dashboard/products/all/) and [set up a collection](https://my-shop.fourthwall.com/admin/dashboard/products/collections/).
|
|
|
|
3. (optional) [Style your store](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/) for the [checkout flow](https://docs.fourthwall.com/storefront/checkout).
|
|
|
|
4. After you have signed up, [get a storefront token](https://my-shop.fourthwall.com/admin/dashboard/settings/for-developers).
|
|
|
|
5. Fill out the environment variables below in .env.local.
|
|
|
|
```bash
|
|
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`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/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`
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
Your app should now be running on [localhost:3000](http://localhost:3000/).
|
|
|
|
## Deploying
|
|
|
|
```bash
|
|
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](https://docs.fourthwall.com/storefront).
|
|
|
|
* How to get your [collection handle](https://docs.fourthwall.com/storefront/collection).
|