snext

This is a Next.js project bootstrapped with create-next-app that emulates many of the benefits that sku provides including Braid Design System, Vanilla Extract, Vocab, Localised routing, Playwright, ESLint, Prettier, Jest and Storybook.

This is a proof of concept and an exploration of how the SEEK open source packages can be stitched together into the NextJS framework.

Table of Contents

• Preview Deployment
• Getting Started
  • Prerequisites
  • Installation
  • Development
• Testing
• Storybook
• Next.js

Preview Deployment

You can access a live preview of this project at https://snext-starter.vercel.app/.

You can also see the Storybook live demo https://snext-storybook.vercel.app/

Getting Started

These instructions will help you get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Make sure you have the following tools installed on your machine:

• Node.js (v18 or higher)
• pnpm - Once you have node you can run npm -g i pnpm

Installation

pnpm install

Development

pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Testing

The project includes a combination of Playwright and React Testing Library for testing. Also Storybook interaction tests are used to exercise components

Playwright

To spin up the Playwright interactive tests in a user friendly debug window, run the following:

pnpm test-e2e-ui

Jest + React Testing Library (RTL)

Jest tests with RTL are also available for unit tests. You can run them in watch mode.

pnpm test-watch

Storybook Interaction Tests

Interaction tests are a nice way to build tests for your components that sit with your storybook stories. You can run them in watch mode.

pnpm test-storybook-watch

Storybook

Storybook has been implemenented to organise component creation and also setup for interaction and accessibility tests.

pnpm storybook

You can then access Storybook at http://localhost:6006 in your web browser.

To upgrade storybook on a regular basis, run the following:

pnpm dlx storybook@latest upgrade

Resources

• Integrate Next.js and Storybook
• Integrations / Addons
• Awesome Storybook
• Interaction testing with Storybook
• Test runner addon
• Accessibility addon

Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.