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

  • このエントリーをはてなブックマークに追加
  • Pocket

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

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

※ Vue.js フレームワークの Nuxt.js じゃないですよ〜

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

今回、Next.js の環境構築・SASS/SCSS・ESLint・React-Bootstrap 導入を解説します!

前提条件

Node.js

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

nodebrew

nodebrew を使って 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 の設定ファイルを作成します。

[プロジェクト]/next.config.js

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

SCSS を使ってみる

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

[プロジェクト]/styles.scss

$font-size: 10px;

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

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

[プロジェクト]/pages/index.js

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 の設定ファイルを記述します。

[プロジェクト]/.eslintrc.js

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 をレスポンシブ対応にしてみましょう。

[プロジェクト]/pages/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;

関連記事

お仕事ください!

僕が代表を務める 株式会社 EeeeG では Web 制作・システム開発・マーケティング相談を行っています。
なにかお困りごとがあれば、Twitter DM や Web サイトからお気軽にご相談ください。

コメント

コメントを残す

*