Morioh
Login
André Schürrle

André Schürrle

1 year ago

So verwenden Sie gestaltete Komponenten in Next.js

Styled Components ist eine beliebte Bibliothek zum Gestalten von React-Anwendungen. Es ermöglicht Entwicklern, CSS-Code so zu schreiben, als wäre es eine JavaScript-Komponente, was die Verwaltung und Gestaltung komplexer Anwendungen erleichtert. Styled Components bietet außerdem dynamisches Design, ermöglicht die Erstellung wiederverwendbarer Stile und vereinfacht das Anwenden von Stilen auf eine Komponente basierend auf ihren Requisiten. Insgesamt ermöglicht es Entwicklern, mit minimalem Aufwand visuell beeindruckende und interaktive Weboberflächen zu erstellen.

In diesem Tutorial erfahren Sie, wie Sie gestaltete Komponenten in Next.js, dem beliebten serverseitigen Rendering-Framework für React, verwenden, und werfen einen Blick auf einige Best Practices für deren Integration in Ihre Projekte.

Zuerst müssen Sie das Paket installieren

#yarn
yarn add styled-components

#npm
npm install styled-components

Nach der Installation des Pakets können Sie es ganz einfach wie folgt verwenden.

import styled from "styled-components";

const Title = styled.h1`
  color: red;
`;

export default () => (
  <div>
    <Title>My First Next.js Page</Title>
  </div>
);

Wenn Sie es jedoch innerhalb von Next js verwenden möchten, können Probleme auftreten, bei denen Sie möglicherweise nicht verstehen, warum es sich so verhält. Wenn Sie beispielsweise die Seite aktualisieren, werden einige der Elemente, die Sie mit der gestalteten Komponente erstellt haben, möglicherweise nicht richtig gerendert und sind möglicherweise leer. Um dieses Problem zu lösen, müssen Sie wie folgt vorgehen.

Fügen Sie das Babel-Plugin und die .babelrc-Datei hinzu

Sie müssen zunächst das folgende Paket installieren.

yarn add -D babel-plugin-styled-components

Erstellen Sie eine Datei mit dem Namen .babelrc im Projektstammpfad. Sie können diesen Befehl in Ihr Terminal schreiben.

touch .babelrc

Der Inhalt dieser Datei sollte wie folgt aussehen:

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

Wenn Sie „create-react-app“ verwendet haben, ist es besser, eine _document- Datei zu erstellen, die Ihr nächstes Dokument ersetzt.

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>
    );
  }
}

Viel Spaß beim Codieren!!!

1.00 GEEK