More than 3 years have passed since last update.

Next.jsでCSSを読み込む方法

Last updated at 2020-02-06Posted at 2020-02-05

#Next.jsでCSSを読み込むときは、Headを定義しlinkタグにて読み込む

以下のような感じ
linkタグで読み込めばOK

import React from "react";
import Header from "../includes/header";
import Head from "next/head";

const MainLayout = props => {
  return (
    <>
      <Head>
        <title>My Awesome app</title>
        <link
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          rel="stylesheet"
        />
        <link
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
          crossorigin="anonymous"
        />
        <link href="#" rel="stylesheet" />
      </Head>
      <Header /> {props.children}
    </>
  );
};

export default MainLayout;

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up