Next.js Odoo Commerce

A Next.js 14 and App Router-ready ecommerce template featuring:

• Next.js App Router
• Optimized for SEO using Next.js's Metadata
• React Server Components (RSCs) and Suspense
• Server Actions for mutations
• Edge Runtime
• New fetching and caching paradigms
• Dynamic OG images
• Styling with Tailwind CSS
• Checkout and payments with Odoo
• Automatic light/dark mode based on system settings

Next.js Commerce utilizes the Odoo Frontend API to provide client-safe access to your store's data. The Frontend API has read-only permissions for most models including products, categories, navigation menus, pages, and more. With the cart management, checkout.

Note: Looking for Next.js Commerce v1? View the code, demo, and release notes

Project setup

To connect Next.js Commerce to a Odoo store, you will need to set the environment variables defined in .env.example. Using Vercel Environment Variables for this is recommended, but a .env file is all that is necessary.

Note: If using an .env file, you should not commit this to your repository as it may expose secrets that allow others to access your store.

To use Vercel Environment Variables:

1. Install Vercel CLI: npm i -g vercel
2. Link a Vercel project: vercel link (this creates a .vercel directory)
3. Download your environment variables: vercel env pull

Expand if you work at Vercel and want to run locally and/or contribute

1. Run vc link.
2. Select the Vercel Solutions scope.
3. Connect to the existing commerce-Odoo project.
4. Run vc env pull to get environment variables.
5. Run pnpm dev to ensure everything is working correctly.

Connecting to your Odoo store

In order to use the Frontend API, you need to obtain a public required key for your Odoo Store.

Expand to view env variables detailed walkthrough

1. COMPANY_NAME="Vercel Inc."
2. TWITTER_CREATOR="@vercel"
3. TWITTER_SITE="https://nextjs.org/commerce"
4. SITE_NAME="Odoo Commerce"
5. ODOO_REVALIDATION_SECRET=""
6. ODOO_STOREFRONT_ACCESS_TOKEN='Odoo Access Token'
7. ODOO_STORE_DOMAIN="[your-Odoo-store-subdomain].com"
8. ODOO_API_VERSION='Version'

Running locally

Note: Ensure you are using Node v16 or above before running the install command.

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

Production deployment

Configure on-demand incremental static regeneration (ISR)

Using on-demand revalidation in Next.js is recommended to optimize data fetching and serve requests from cache unless data is changed.

The above product events are triggered when variants are added, updated, and removed, as well as when stock is updated.

Note: If you add functionality that uses data from other models, you will need to configure the relevant events to listen for in Odoo Store.