Getting started with Next js

Prerequisites

• storybook that holds stories to be tested

• lost-pixel configuration file

1. Follow this next.js quickstart doc to have a basic example up and running

2. Add lost-pixel configuration file

3. Add action file in the root of your project. In .github/workflows/ci.yml

   on: [push]
   jobs:
     build:
       runs-on: ubuntu-latest
   
       steps:
         - name: Checkout
           uses: actions/checkout@v3
   
         - name: Setup Node
           uses: actions/setup-node@v3
           with:
             node-version: 18.x
             cache: "npm"
   
         - name: Install dependencies
           run: npm install
   
         - name: Build ladle
           run: npm run build
   
         - name: Serve ladle
           run: npm run serve &
   
         - name: Lost Pixel
           uses: lost-pixel/lost-pixel@v3.4.0

4. (Optional) Add automatic PR for easy baseline update

Automatic baseline update PR

After writing your first stories you can adopt the visual regression testing by following visual regression testing workflow

You can see some popular integrations in the lost-pixel-examples directory