Next.js(React)でCSSとSASS(SCSS)、Bootstrapを使う

Next.jsでCSSとSASS(SCSS)、Bootstrapを使う

next.jsでreactのSPAを作り始めたのですが、css, sass, bootstrapの設定周りですこしつまづいたのでメモ。

Next.jsのプロジェクト作成

プロジェクト作成

yarn craete next-app

これでNext.jsのプロジェクトが作成されます。 yarn dev で起動できます。

CSS, SASSの設定

css, sass(scss)ファイルをimportできるようにします。

まずはパッケージインストールします。

yarn add @zeit/next-css

yarn add @zeit/next-sass node-sass

next.config.jsの作成

プロジェクトのルートに next.config.js ファイルを作成します。これはnext.jsの設定ファイルです。

以下はcssとsassどちらもimportできるような設定です。

next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
module.exports = withCSS(withSass());

Bootstrapの設定

Bootstrapを入れます。

yarn add bootstrap

yarn add react-bootstrap

Bootstrapを適用します。
アプリ全体に適用したいので、グローバルに設定したいです。

まず、/pages/_app.js を作成します。
next.jsでは、全体設定のためのインターフェースとして _app.js で設定できるようになっています。

_app.js でbootstrapをimportすることでアプリ全体に適用していくのです。

/pages/_app.js

import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp ({ Component, pageProps }) {
  return <Component {...pageProps} />
};

export default MyApp;

ページを作ってみる

では正しく設定できているか実際にページを作って確認してみましょう。

/pages/login.js

import {Container, Row, Col, Form, Button} from 'react-bootstrap';

const Login = () => {
  return (
    <Container className='login'>
      <Row>
        <Col className='text-center'>
          <h2>ログイン</h2>
        </Col>
      </Row>
      <Row>
        <Col>
          <Form className='col-6 offset-3'>
            <Form.Group>
              <Form.Control type='text' name='id' />
            </Form.Group>
            <Form.Group>
              <Form.Control type='password' name='password' />
            </Form.Group>
            <Form.Group>
              <Form.Control type='submit' name='submit' value='ログイン' className='btn btn-primary' />
            </Form.Group>
          </Form>
        </Col>
      </Row>
    </Container>
  );
};

export default Login;

確認してみる

起動します

yarn dev

localhost:3000/login にアクセス。

わあい