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

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

Next.js

Next.jsとは

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

インストール

  1. npm init
  2. npm install next react react-dom
  3. mkdir pages
  4. touch pages/index.js
  5. 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ではできない。
以下のいずれかの方法を使う必要がある。

  1. オブジェクト変数をstyle属性にセット
  2. ビルトインCSS(<style jsx>)
  3. CSS文字列を返すコンポーネントをインポートしてビルトインCSSとして使用
  4. 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)で読み込みべきだと述べている。

  1. mkdir components
  2. touch components/{Layout,Header,Footer}.js
  3. 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>
      </>
  );
}

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です