【React】Next.js環境構築【SASS/ESLint】

こんにちは。タクマ™ [@suwaru_blog] です。

最近、React フレームワークの Next.js でコーポレートサイト製作をしています。

昔は React 始めるにも webpack 入れたり、Babel を入れたり大変でしたが、
Next.js はそのあたり考えなくていいし、非常に使いやすくてオススメです。…というわけで

前提条件

Node.js

React を使うためには Node.js をインストールしておく必要があります。
できるだけ最新のバージョンを入れておきましょう。

nodebrew

yarn

Node.js のライブラリを使うために yarn コマンドを利用します。
以下のリンクからインストールしておいてください。

Next.js

create-next-app

create-next-app というコマンドでプロジェクト構築するのが早いです。
create-next-app-cli というライブラリを導入します。

# グローバルに使えるコマンドとしてインストール
yarn global add create-next-app-cli

# Next.js プロジェクト作成
create-next-app [プロジェクト名] --template default

cd [プロジェクト名]

# ローカル開発用のサーバ起動
yarn dev

# 本番リリース時は build でプロジェクトを最適化する
yarn build

# 本番用サーバ起動
yarn start

単純に Next.js を使いたいだけだったら、作業はこれだけです！

Node.js 本番リリース方法

リモートサーバ上の localhost にアクセスする方法はご存知ですか？
Apache のリバースプロキシで Node.js サーバの localhost にアクセスする方法を解説しました。

SASS/SCSS

続いて CSS を効率的に記述できる SASS/SCSS を導入します。
まず、必要なライブラリを追加します。

yarn add @zeit/next-sass node-sass

Next.js の設定ファイルを作成します。

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  /* config options here */
})

SCSS を使ってみる

SCSS の動作確認をしてみましょう。

$font-size: 10px;

.example {
    font-size: $font-size;
}

先ほどのファイルを index.js に import してみましょう。
ローカルサーバを起動するとホットリロードされます。

import "../styles.scss"


export default () => (
  <div className="example">Hello World!</div>
)

ESLint

JavaScript の文法チェックをしてくれる ESLint を導入しましょう。

yarn global add eslint eslint-plugin-react
yarn add -D eslint eslint-plugin-react
eslint --init

ESLint の設定ファイルを記述します。

module.exports = {
    "env": {
        "node": true,
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "React": "writable"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off"
    }
};

eslint . を実行して、設定を反映させましょう。
これでエディター上で JavaScript エラー・アラート表示してくれるようになります。

React-Bootstrap

コンポネントで Bootstrap を扱えるようになる React-Bootstrap も追加しておきましょう。

yarn add react-bootstrap

試しに index.js をレスポンシブ対応にしてみましょう。

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

const IndexComponent = () => (
  <Container>
    <Row>
      <div>
        <div className="example">
          Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
        </div>
      </div>
    </Row>
  </Container>
)

IndexComponent.displayName = 'IndexComponent';

export default IndexComponent;

関連記事