diff --git a/.env.example b/.env.example index c5171847f5..58c76b9ff2 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ TWITTER_CREATOR="@DuvCharles" TWITTER_SITE="https://nextjs.org/commerce" SITE_NAME="Next.js Commerce" -SYLIUS_STORE_DOMAIN=localhost:8001 +NEXT_PUBLIC_SYLIUS_BACKEND_API=http://localhost:8000 diff --git a/README.md b/README.md index 981685d2ba..941f8b71fb 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ -[![Deploy with Vercel](https://vercel.com/button)](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) +# Next.js Commerce x Sylius -# Next.js Commerce - -A Next.js 14 and App Router-ready ecommerce template featuring: +A Next.js 14 and App Router-ready ecommerce template, built with [Sylius](https://github.com/sylius/sylius), featuring: - Next.js App Router - Optimized for SEO using Next.js's Metadata @@ -12,47 +10,31 @@ A Next.js 14 and App Router-ready ecommerce template featuring: - New fetching and caching paradigms - Dynamic OG images - Styling with Tailwind CSS -- Checkout and payments with Shopify - Automatic light/dark mode based on system settings -

- -> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1). - -## Providers - -Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966). +## What is Sylius? -Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged. +[Sylius](https://sylius.com/) is an open-source e-commerce platform written in PHP. It is built on top of the Symfony framework and offers a wide range of features for building and managing an online store, including product management, order management, and checkout. -- Shopify (this repository) -- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/)) -- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/)) -- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/)) -- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/)) -- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/)) -- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/)) -- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/)) +## Requirements -> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing). +- Node.js +- PHP -## Integrations +## Getting started -Integrations enable upgraded or additional functionality for Next.js Commerce +### Running Sylius -- [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/)) - - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration. - - Search runs entirely in the browser for smaller catalogs or on a CDN for larger. +1. You need a [Sylius](https://sylius.com/download/) instance, either in the cloud or self-hosted. +2. Follow the Read-Me of this [repository](https://github.com/theodo/sylius-commerce-config) to configure your Sylius Project -## Running locally +### Running Next.js Commerce -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` file is all that is necessary. +1\. You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. Copy the contents of .env.example to a .env file in the root of your Next.js Commerce project, and make sure the NEXT_PUBLIC_Sylius_BACKEND_API environment variable points to your Sylius backend domain (default: http://localhost:8000). -> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store. +> Note: You should not commit your `.env` file or it will expose secrets. -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` +2\. From the `nextjs-commerce` subfolder, run: ```bash pnpm install @@ -60,17 +42,3 @@ pnpm dev ``` Your app should now be running on [localhost:3000](http://localhost:3000/). - -
- Expand if you work at Vercel and want to run locally and / or contribute - -1. Run `vc link`. -1. Select the `Vercel Solutions` scope. -1. Connect to the existing `commerce-shopify` project. -1. Run `vc env pull` to get environment variables. -1. Run `pnpm dev` to ensure everything is working correctly. -
- -## Vercel, Next.js Commerce, and Shopify Integration Guide - -You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel. diff --git a/app/sitemap.ts b/app/sitemap.ts index 334cb581a3..73ef963b53 100644 --- a/app/sitemap.ts +++ b/app/sitemap.ts @@ -1,5 +1,4 @@ import { getCollections, getPages, getProducts } from 'lib/sylius'; -import { validateEnvironmentVariables } from 'lib/utils'; import { MetadataRoute } from 'next'; type Route = { diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx index c18635740f..45921db77c 100644 --- a/components/cart/add-to-cart.tsx +++ b/components/cart/add-to-cart.tsx @@ -72,7 +72,6 @@ export function AddToCart({ }) { const [message, formAction] = useFormState(addItem, null); const searchParams = useSearchParams(); - const [isPending, startTransition] = useTransition(); const defaultVariantId = variants.length === 1 ? variants[0]?.code : undefined; const variant = variants.find((variant: ProductVariant) => variant.selectedOptions.every( diff --git a/lib/sylius/index.ts b/lib/sylius/index.ts index 270c1027cf..509b343d1d 100644 --- a/lib/sylius/index.ts +++ b/lib/sylius/index.ts @@ -12,7 +12,7 @@ import { UpdateCartPayload } from './types'; -const DOMAIN = `${process.env.SYLIUS_STORE_DOMAIN}`; +const DOMAIN = `${process.env.NEXT_PUBLIC_SYLIUS_BACKEND_API}`; const ENDPOINT = `${DOMAIN}${SYLIUS_API_ENDPOINT}`; // Fetch diff --git a/lib/sylius/normalizer/product-normalizer.ts b/lib/sylius/normalizer/product-normalizer.ts index 542f409403..524fcb21af 100644 --- a/lib/sylius/normalizer/product-normalizer.ts +++ b/lib/sylius/normalizer/product-normalizer.ts @@ -48,7 +48,7 @@ const normalizeProductOption = (option: SyliusProductOption): ProductOption => ( }); export const normalizeProductImage = (image: SyliusProductImage): Image => ({ - url: process.env.NEXT_PUBLIC_SYLIUS_API_URL + image.path, + url: process.env.NEXT_PUBLIC_SYLIUS_BACKEND_API + image.path, altText: image.path, width: 400, height: 400