Bootstrapping Next

This documentation explains how to get started with the integration in a Next 13 application.

Requirements

Next 13 project with next version 13.4.6 or higher,
Contentful space,
Node.js version 16.x,
@vsf-enterprise NPM registry access.

Something's missing?

If you don't have a Next 13 project yet, create one by following the official guide. If you don't have a Contentful space yet, we suggest you get in touch with Contentful and request a demo.

Creating `.npmrc` file

In order to start working with our enterprise packages, add a .npmrc file with the following content to the root of your repository:

@vsf-enterprise:registry=https://registrynpm.storefrontcloud.io

Importing integration files

Vue Storefront ships with a CLI tool for CMS integrations which will import all of the frontend acceleration files into your project.

The CLI tool has been tested with a fresh Next 13 project without the App Router.

To use the CLI, simply run the following command from the root of your project:

npx @vsf-enterprise/cms-cli contentful next

This will create (or overwrite) the following files in your project:

├── schemas
│   └── schemas.json
└── src
    ├── components
    │   └── cms
    │       ├── layout
    │       │   ├── Footer.tsx
    │       │   └── MegaMenu.tsx
    │       ├── page
    │       │   ├── Accordion.tsx
    │       │   ├── Banner.tsx
    │       │   ├── Card.tsx
    │       │   ├── Editorial.tsx
    │       │   ├── Gallery.tsx
    │       │   ├── Grid.tsx
    │       │   ├── Hero.tsx
    │       │   ├── NewsletterBox.tsx
    │       │   ├── ProductCard.tsx
    │       │   └── Scrollable.tsx
    │       └── wrappers
    │           └── RenderComponent.tsx
    └── pages
        ├── [[...slug]].tsx
        ├── _app.tsx
        └── contentfulLayout.tsx

If there is an index.tsx file in your src/pages directory - delete it. Otherwise - once you run your application - it will conflict with the [[slug]].tsx component responsible for rendering dynamic CMS pages.

Installing dependencies

The UI layer of the integration relies on Storefront UI and its dependencies. Follow the official guide to install the library in your project.

You will also need to install other integration dependencies such as supplementary packages related to Storefront UI or agnostic CMS components. Run the following command to install them in your project:

# npm
npm install @storefront-ui/typography @vsf-enterprise/cms-components-utils

# yarn
yarn add @storefront-ui/typography @vsf-enterprise/cms-components-utils

Loading fonts

The default Storefront UI setup uses Google Fonts. One way to loading these fonts to your project is by importing them in the Next's global.css file:

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300;400;500;700&display=swap');

To complete the fonts setup, add the following Storefront UI typography configuration to your Tailwind config file:

const sfTypography = require('@storefront-ui/typography');

module.exports = {
  // ...
  plugins: [sfTypography],
  theme: {
    fontFamily: {
      sans: 'Red Hat Text, sans-serif',
    }
  }
};

What next?

Now your frontend application has the scaffolding required to display dynamic CMS components. However, it also needs an engine to fetch the data from Contentful. Proceed to the Middleware and SDK setup guide and learn how to install it.