To use filbert-js
with next.js
, follow below steps
@filbert-js/macro
in pages@filbert-js/server-stylesheet
to support SSR/Client Hydration1// app.js2import { styled } from '@filbert-js/macro';34import React from 'react';56const Box = styled.div`7 color: red;8`;9export default function App() {10 return <Box>Next.js is awesome</Box>;11}
1// pages/_document.js23import Document from 'next/document';4import { createStylesheet } from '@filbert-js/server-stylesheet';56class 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);2021 const styleTags = sheet.getReactElements();22 return {23 ...initialProps,24 styles: (25 <>26 {styleTags}27 {initialProps.styles}28 </>29 ),30 };31 } finally {32 }33 }34}3536export default MyDocument;
👉 Checkout starter kit