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