Customizing The Preset

In this lesson, you will learn how to create a customized project within a monorepo with a different style and preset from the main branding. This is useful for creating special pages like a conference landing page that requires unique styles.

Resolve alias

Use this in the next.config file:

import path from 'path'

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias ??= {}
    config.resolve.alias['@mono/styled-system'] = path.resolve('styled-system')

    return config
  },
}

export default nextConfig