FastStore: New @faststore/core package version

Added

August, 19

FastStore v2 users can now update the @faststore/core package version and benefit from enhanced API extensions, streamlined error page customization in the Headless CMS, and support for Next.js 13.

For more information on this update, check out FastStore GitHub releases.

What has changed?

Enhanced API extensions

To reduce bundle sizes, align with GraphQL community standards, and get up to date with the latest bundling and compilation tools,@faststore/core 3.x deprecates the @faststore/graphql-utils package in favor of the client-preset plugin.

Streamlined error page customization in the Headless CMS

Before, FastStore had a more limited scope for customizing content on pages such as Login, 404 Error, and 500 Error within the Headless CMS. Customizing these pages was only possible through code, which limited users’ ability to tailor these pages to their specific needs within the Headless CMS.

These content types are now part of @faststore/core 3.x, and users can customize them within the Headless CMS.

${"base64":" ","img":{"width":1879,"height":733,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":5072520,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/release-note-hcms___480683289080e473473504654c4e4697.gif"}}$

Support for Next.js 13

FastStore v2 now supports Next.js version 13, bringing performance and stability improvements.

Next.js 13 simplifies app directories, introduces Server Components for optimal performance, and incorporates Turbopack, a faster, Rust-based alternative to Webpack. This version also includes improvements to next/image and @next/font.

What needs to be done?

To benefit from these changes, you first need to update your store’s @faststore/core version:

In your local FastStore project, install the latest version of @faststore/core:

_10yarn add @faststore/core@ˆ3.0.0
Run the project locally with yarn dev.

After running yarn dev, update each topic mentioned before as follows:

Migrating to Next.js 13

Open your store’s package.json file and, in dependencies, edit the next entry:

_10"dependencies": { _10 ... _10 "next": "^13.5.6", _10 ... _10},
After updating the next dependency, refer to the Upgrading from 12 to 13 official Next.js documentation for more information on how to migrate to version 13.

Error page customization in the Headless CMS

To sync the updated version, open a new terminal and run faststore cms-sync.
Access the VTEX Admin and go to Headless CMS > FastStore. You should be able to see the three new content types listed there.
Click one of the content types, and thenAdd section ( +).
Choose the EmptyState section and update its fields according to your store's requirements.

Enhanced API extensions

Follow the Best practices for API extensions guide for more information.