nextjs

To use filbert-js with next.js, follow below steps

1. use @filbert-js/macro in pages
2. use @filbert-js/server-stylesheet to support SSR/Client Hydration

1// app.js
2import { styled } from '@filbert-js/macro';
3
4import React from 'react';
5
6const Box = styled.div`
7  color: red;
8`;
9export default function App() {
10  return <Box>Next.js is awesome</Box>;
11}

1// pages/_document.js
2
3import Document from 'next/document';
4import { createStylesheet } from '@filbert-js/server-stylesheet';
5
6class MyDocument extends Document {
7  static async getInitialProps(ctx) {
8    const sheet = createStylesheet();
9    const originalRenderPage = ctx.renderPage;
10    try {
11      ctx.renderPage = () =>
12        originalRenderPage({
13          enhanceApp: (App) => {
14            return (props) => {
15              return sheet.collectStyles(<App {...props} />);
16            };
17          },
18        });
19      const initialProps = await Document.getInitialProps(ctx);
20
21      const styleTags = sheet.getReactElements();
22      return {
23        ...initialProps,
24        styles: (
25          <>
26            {styleTags}
27            {initialProps.styles}
28          </>
29        ),
30      };
31    } finally {
32    }
33  }
34}
35
36export default MyDocument;

👉 Checkout starter kit