Next JS

Install the package:
npm install [email protected]
Add classy-ui/plugin to your babel configuration:
.babelrc
{
  "presets": ["next/babel"],
  "plugins": ["classy-ui/plugin"]
}
Start using it:
import { compose, tokens } from 'classy-ui';
Production
Next JS will by default output to a .next/build directory. The Classy-UI file produced is considered a static asset so you should output that to the static public directory of Next JS. Create the folder if you do not already have it and configure Classy-UI to output there:
.babelrc
{
  "presets": ["next/babel"],
  "plugins": [["classy-ui/plugin", {"output": "public"}]]
}
Next JS provides a <Head /> component which you can use to include the classy-ui.css file:
pages/_app.jsx
import Head from 'next/head'
​
function MyApp({ Component, pageProps }) {
  return (
    <>
      {process.env.NODE_ENV === 'production' ? (
        <Head>
          <link rel="stylesheet" href="/classy-ui.css" />
        </Head>
      ) : null}
      <Component {...pageProps} />
    </>
  )
}
​
export default MyApp
Hashing vs ETAG
Classy-UI does not currently support hashing. The reason being that the Babel plugin is not able to pass information about the name to the build tool. We are exploring this and any feedback is welcome. That means you should ensure that the classy-ui.css file is using ETag.
Last modified 3yr ago