@stitch-fix/sf-next

Next UI

Developer toolkit for building Next UI apps.

Guides

• Getting started (go here first!)
• Migrating to Next UI
• Defining page-based routes, redirects and rewrites
• Rendering pages
• Setting up app deployment with fixops
• Handling client-facing authentication
• Handling client-facing internationalization
• Leveraging Production observability
• Setting up client-side analytics
• Retrieving data with GraphQL
• Gating features using client-facing feature flags
• Styling with CSS Modules
• Running the production server locally
• Browser testing with sf-browser-testing
• Using docker
• Contributing to sf-next
• Understanding the Next UI Architecture

Features

Next UI apps are set up with:

• Git initialization
• TypeScript
• Linting, type-checking, and Jest unit tests
• Browser-based testing framework using webdriver.io
• CircleCI configuration
• Branch previews to preview your branch/PR before final merge and deployment
• Server-side rendering (SSR)
• Storybook for testing components in isolation, especially edge/error cases
• Percy for visual integration testing
• Browser testing for automated browser testing
• Default page layout that includes the global header & footer
• Client auth
• Internationalization
• <GraphQLApiProvider> wrapping the app
• Client Analytics Reporter (CAR) initialization
• Browser testing
• GraphQL-backed feature flags
• Google Tag Manager (GTM) initialization

Need more help?

If you still have questions after reading the guides, feel free to reach out in slack at #next-ui.

For off-hours support, see our PagerDuty. Please use this only for urgent issues (i.e. a service outage related to the sf-next platform).

Analyzing bundle size

You can analyze bundle sizes using webpack bundle analyzer by setting the BUNDLE_ANALYZE environment variable to true. For example, running:

BUNDLE_ANALYZE=true npx sf-next dev

Set BUNDLE_ANALYZE to no-open to prevent it from automatically opening the analysis files in your browser. It will only write the files.