Raccoon Next.js SDK

Init the application using CRA

pnpm dlx @vtex/create-raccoon-app@latest

Start developing

Checkout to the folder created by the CLI. It uses the pattern admin-{app-name} and with this project structure. Install the dependencies using your package manager, and start the dev server.

pnpm i && pnpm run dev

Install raccoon-next

npm i @vtex/raccoon-next

IO Integration Setup

Although you are building a Next.js app, you still need to declare the admin and messages builder for it, as in this manifest.json example:

{
  "name": "raccoon-nextjs-example",
  "vendor": "vtex",
  "version": "0.0.1",
  "title": "Raccoon Next.js SDK",
  "description": "",
  "mustUpdateAt": "2022-08-28",
  "scripts": {
    "postreleasy": "vtex publish"
  },
  "dependencies": {},
  "builders": {
    "admin": "0.x",
    "messages": "1.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

For VTEX IO to correctly map your app route and host, you need to declare them on the /admin/navigation.json (refer to the admin-shell docs (opens in a new tab) to understand these properties) file, following this example:

{
  "section": "desired_section",
  "titleId": "admin-example.navigation.label-group",
  "adminVersion": 4,
  "subSection": "desired_subSection",
  "subSectionItems": [
    {
      "labelId": "admin-example.navigation.label-main",
      "path": "/admin/example",
      "raccoon": {
        "prodUrl": "production-url",
        "devUrl": "dev-url",
        "routes": [
          "/admin/example/all-internal-pages",
          "/admin/example/:dynamic-parameter"
        ]
      }
    }
  ]
}

You will also need to keep declaring the message IDs of your app under the messages folder.

Next.js App Setup

Use the connect and bootstrap functions to establish a connection between the IO app and the Next app.

import type { AppProps } from 'next/app'
import { connect, bootstrap } from '@vtex/raccoon-next'
connect()
function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default bootstrap(App)

Develop the application

To start developing your Next.js app, make sure that dependencies are installed and start the application with:

yarn dev

Make sure you are within the Admin, on https://localhost--teamadmin.myvtex.com (opens in a new tab), for example, and navigate to the path you declared as the route of your application.