「React.js & Next.js超入門」の感想・備忘録4

React.js＆Next.js超入門第2版

posted with ヨメレバ

掌田津耶乃秀和システム 2021年02月27日頃

Next.js

Next.js

Next.jsとは

SSR, SSG, ルーター機能、を提供してくれる。

インストール

npm init
npm install next react react-dom
mkdir pages
touch pages/index.js
npx nextで確認

export default () => <div><h1>Next.js!!</h1></div>;

エクスポート

touch next.config.js

module.exports = {
  exportPathMap: () => {
    return {
      '/': { page: '/' },
    };
  },
};

npx next buildで.nextディレクトリにビルド
npx next exportでビルドしたものをoutディレクトリに静的HTMLファイルとして出力
npx next startでビルドしたものを確認(本番モード)

CSS

Reactではcssファイルをそのままimportすることができたが、Next.jsではできない。
以下のいずれかの方法を使う必要がある。

オブジェクト変数をstyle属性にセット
ビルトインCSS（<style jsx>）
CSS文字列を返すコンポーネントをインポートしてビルトインCSSとして使用
xxx.module.cssをインポート（ID, クラスのスタイル定義のみ可能。タグ指定は不可）

import indexStyle from '../components/indexStyle' // 3の方法
import styles from './index.module.css'; // 4の方法
const h1Style = { color: 'red' } // 1の方法
export default () => {
  return (
    <>
      <style jsx>
        {indexStyle}
      </style>{/*3の方法*/}
      <style jsx>{`
        h1 {
          background-color: blue
        }
      `}</style>{/*2の方法*/}
      <div><h1 style={h1Style} className={styles.h1}>Next.js!!</h1></div>
    </>
  );
};

export default `
  div {
    background-color: yellow
  }
`;

.h1 {
  border: solid 5px green;
}

複数のページを作る

import Link from 'next/link'でLinkコンポーネントをインポートし、
<Link href="/xxx">xxx</Link>でリンクを張る。

import Link from 'next/link'
export default () => {
  return (
    <>
        <h1>index.js</h1>
        <Link href="/other">otherページ</Link>
    </>
  );
};

import Link from 'next/link'

export default () => {
  return (
    <>
      <h1>other.js</h1>
      <Link href="/">index</Link>
    </>
  );
}

レイアウト

ページ全体のコンポーネントを用意し、その中にHeader, Footerなどのコンポーネントを組み込む。
著者はCSSはページ全体のコンポーネント(以下ではLayout.js)で読み込みべきだと述べている。

mkdir components
touch components/{Layout,Header,Footer}.js
touch pages/sample.js

import Layout from '../components/Layout'
import Link from "next/link";

export default () => {
  return (
    <Layout title="レイアウトサンプル">
      <Link href="/">index</Link>
    </Layout>
  );
}

import indexStyle from './indexStyle'
import Header from './Header'
import Footer from './Footer'

export default (props) => {
  return (
    <>
      <style jsx>
        {indexStyle}
      </style>
      <div>
        <Header title={props.title} />
        {props.children}
        <Footer />
      </div>
      </>
  );
}

export default (props) => {
  return (
    <header>
      <h1>{props.title}</h1>
    </header>
  );
}

export default () => {
  return (
    <footer>
      <hr />
    </footer>
  );
}

<head>の設定

import Head from 'next/head'でHeadコンポーネントをインポートし、<Head>内に記述する。

import indexStyle from './indexStyle'
import Header from './Header'
import Footer from './Footer'
import Head from 'next/head'

export default (props) => {
  return (
    <>
      <Head>
        <title>Next.jsテストサイト</title>
        <meta charSet="utf-8" />
      </Head>
      <style jsx>
        {indexStyle}
      </style>
      <div>
        <Header title={props.title} />
        {props.children}
        <Footer />
      </div>
      </>
  );
}