یکی از راه های استایل دادن به صفحات استفاده از styled components هست.
برای نصب باید از دستور زیر استفاده کنین.
yarn add styled-components npm install styled-components
شما به راحتی میتونین از اون به شکل زیر استفاده کنین.
import styled from 'styled-components'; export default () => ( <div> <Title>My First Next.js Page</Title> </div> ); const Title = styled.h1` color: red; `
اما وقتی که میخواین داخل next js از اون استفاده کنین ممکنه به یسری مشکلات بر بخورید که شاید دلیلش رو متوجه نشید.
برای مثال وقتی صفحه رو رفرش میکنید ممکنه بعضی از المان هایی که با styled component درست کردید به درستی رندر نشن و جای اونها خالی باشه.
برای رفع این مشکل باید از راه زیر جلو برید.
اول باید پکیج زیر رو نصب کنید.
yarn add -D babel-plugin-styled-components
در مسیر روت پروژه فایلی به اسم .babelrc درست کنید .
touch .babelrc
محتویات این فایل باید به شکل زیر باشه .
{ "presets": [ "next/babel" ], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }
محتویات این فایل باید به شکل زیر باشه .
اگه از create-react-app استفاده کرده بودین بهتره که یه فایل _document هم بسازین که جایگزین Document خود next میشه.
import Document, { Head, Main, NextScript } from 'next/document'; // Import styled components ServerStyleSheet import { ServerStyleSheet } from 'styled-components'; export default class MyDocument extends Document { static getInitialProps({ renderPage }) { // Step 1: Create an instance of ServerStyleSheet const sheet = new ServerStyleSheet(); // Step 2: Retrieve styles from components in the page const page = renderPage((App) => (props) => sheet.collectStyles(<App {...props} />), ); // Step 3: Extract the styles as <style> tags const styleTags = sheet.getStyleElement(); // Step 4: Pass styleTags as a prop return { ...page, styleTags }; } render() { return ( <html> <Head> <title>My page</title> {/* Step 5: Output the styles in the head */} {this.props.styleTags} </Head> <body> <Main /> <NextScript /> </body> </html> ); } }
امیدوارم که این پست براتون مفید باشه.