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