Getting Started

Set up Master CSS in Next.js

A quick guide to start using Master CSS in your Next.js project.

Preparation

1. Create a Next.js project

If you don't have a Next.js project, create one first. It's recommended to refer Create Next App :

npx create-next-app@latest --ts
cd project

2. Installation

npm install @master/css

Choose a compilation mode

3. Import

import '../styles/globals.scss'
import type { AppProps } from 'next/app'
import '@master/css'

4. Launch server

npm run dev

Hello world

Now, start developing your UI with Master CSS. 🎉

localhost:3000

Hello World

import type { NextPage } from 'next'
import Head from 'next/head'
const Home: NextPage = () => {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className="font:40 font:heavy italic m:50 text:center">
Hello World
</h1>
</>
)
}
export default Home

Manually initialize

To customize the configuration before initialization, please set it to manual:

import Docuemnt, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
export default function MyDocument() {
return (
<Html>
<Head>
<script dangerouslySetInnerHTML={{ __html: 'window.MasterCSSManual=true' }}></script>
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}
// ...

To learn more, see the Configuration documentation.

Hybrid rendering

We devised a hybrid architecture that allows you to pre-generate CSS from HTML on the server side, and then continue to use JIT on the client side by reverse parsing.

import Docuemnt, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import { render } from '@master/css/render';
import { StyleSheet } from '@master/css';
export default function MyDocument() {
return (
<Html>
<Head/>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const { css } = render((await ctx.renderPage()).html, { StyleSheet })
const initialProps = await Docuemnt.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
<style id="master-css">{css}</style>
{initialProps.styles}
</>
)
}
}

© Aoyue Design LLC.
Issue on this page
Edited byBenseage