فرنام همایونفر
فرنام همایونفر
خواندن ۲ دقیقه·۳ سال پیش

هماهنگ کردن 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> ); } }


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



reactjsstyled compoenntjavascriptnext jstypescript
ویولنیست ، کمی برنامه نویس ، طراح سایت ، علاقه مند به یادگیری سازهای مختلف
شاید از این پست‌ها خوشتان بیاید