Coming Soon ...

Thanks for visiting!
Sorry, currently this page is not available in English yet.
It will be translated soon.

tips / javascript

React/Next.js + TypeScript + Emotion + Netlify の環境構築

August 14, 2022

React/Next.js + TypeScript + Emotion + Netlify の環境構築およびデプロイまでの手順です。



  • Next.js : 12.1.5
  • TypeScript : 4.7.4
  • ESLint : 8.21.0
  • Emotion : 11.10.0


  • React/Next.js + TypeScript + Emotion + Netlify でwebサイトを公開する


Next.js のインストール

Netlify の公式サイトのスターターを使用します。

以下のリポジトリにアクセスして、Use this template ボタンからご自身のGitHubにリポジトリを作成します。リポジトリが作成できたらローカル環境にクローンします。

TypeScript のインストール

TypeScript をインストールします。

npm install typescript @types/node @types/react @types/react-dom --save-dev

tsconfig.json ファイルを作成する

touch tsconfig.json

npx create-next-app@latest --ts を実行した際に生成される場合と同じ内容を記述します。

  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]

next-env.d.ts ファイルを作成します。

touch next-env.d.ts

npx create-next-app@latest --ts を実行した際に生成される場合と同じ内容を記述します。

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see for more information.

.gitignore に追記します。

# typescript

next.config.js ファイルを作成する。

touch next.config.js

こちらも npx create-next-app@latest --ts を実行した際に生成される場合と同じ内容を記述します。

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,

module.exports = nextConfig

ESLint のインストール

ESLint をインストールします。

npm install eslint eslint-config-next --save-dev

.eslintrc.json ファイルを作成します。

touch .eslintrc.json

こちらも npx create-next-app@latest --ts を実行した際に生成される場合と同じ内容を記述します。

  "extends": "next/core-web-vitals"

_app.js ファイルを _app.tsx に変更して、以下のように書き換えます。

import type { AppProps } from 'next/app'

import '@styles/globals.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />

ここで一度 npm run dev を実行して、ブラウザで http://localhost:3000 にアクセスしてみます。以下の画面が表示されれば問題ありません。

Emotion のインストール

Emotion をインストールします。Next.js で TypeScript と一緒に使用するために必要な @emotion/babel-plugin もあわせてインストールします。

npm install @emotion/react @emotion/babel-plugin --save-dev 

.babelrc を作成して、以下のように記述します。

  "presets": [
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
  "plugins": ["@emotion/babel-plugin"]

tsconfig.json"types": ["@emotion/react/types/css-prop"] を追記します。

    "compilerOptions": {
        "types": ["@emotion/react/types/css-prop"],

index.js のファイル名を index.tsx に変更して、Emotion でスタイルを変更してみます。

import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'
import { css } from '@emotion/react'

export default function Home() {
  return (
    <div className="container">
        <title>Next.js Starter!</title>
        <link rel="icon" href="/favicon.ico" />

        <Header title="Welcome to my app!" />
        <p css={desc}>
          Get started by editing <code>pages/index.js</code>

      <Footer />

const desc = css`
  color: green;

もう一度 npm run dev を実行して、ブラウザで http://localhost:3000 にアクセスします。以下のように、テキストがcssで指定した色に変更されていれば問題ありません。

ファイルを src フォルダにまとめる場合

src フォルダを作成して、 components pages styles フォルダを移動します。

tsconfig.jsonbaseUrlpaths を追記します。

  "compilerOptions": {
        // 省略
    "baseUrl": ".",
    "paths": {
      "@*": [
    // 省略

Netlify にデプロイする


Netlify にログインして、 「Add new site」 > 「Import exising project」を選択します。

「Connect to Git provider」でGitHubを選択します。

「Pick a repository from GitHub」に切り替わり、リポジトリの一覧が表示されるので、先ほどpushしたリポジトリを選択します。

「Basic build settings」はデフォルトのままで問題ありません。確認できたら「Deploy site」をクリックしてデプロイします。