خواندن ۲ دقیقه·۴ سال پیش

هماهنگ کردن Next Js و Styled component

یکی از راه های استایل دادن به صفحات استفاده از 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 درست کردید به درستی رندر نشن و جای اونها خالی باشه.

برای رفع این مشکل باید از راه زیر جلو برید.

اضافه کردن babel plugin و فایل .babelrc

اول باید پکیج زیر رو نصب کنید.

yarn add -D babel-plugin-styled-components

در مسیر روت پروژه فایلی به اسم .babelrc درست کنید .

touch .babelrc

محتویات این فایل باید به شکل زیر باشه .

{
  &quotpresets&quot: [
    &quotnext/babel&quot
  ],
  &quotplugins&quot: [
    [
      &quotstyled-components&quot,
      {
        &quotssr&quot: true,
        &quotdisplayName&quot: true,
        &quotpreprocess&quot: 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>
    );
  }
}

امیدوارم که این پست براتون مفید باشه.

reactjsjavascriptnext jstypescript

فرنام همایونفر

ویولنیست ، کمی برنامه نویس ، طراح سایت ، علاقه مند به یادگیری سازهای مختلف

شاید از این پست‌ها خوشتان بیاید