What is this

Next.js + Typescriptで環境構築するときに頻繁に検索している気がするので、そのメモ

tpescript用の環境作成コマンドよしなにやってくれる便利なやつ

yarn create next-app --typescript

hanetsuki

既存のeslint設定を削除して、カスタムしたlint設定を適応する。

rm .eslintrc.json
touch .eslintrc.js
yarn add -D @typescript-eslint/eslint-plugin

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'next'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    'react-hooks',
    '@typescript-eslint'
  ],
  rules: {
    'import/no-anonymous-default-export': 'off',
    '@next/next/no-img-element': 'off',
    '@typescript-eslint/ban-types': 'warn',
    'quotes': ['error', 'single'],
    'space-in-parens': ['error', 'never'],
    'no-multi-spaces': 'error',
    'no-multiple-empty-lines': ['error', {'max': 1}],
    'comma-dangle': 'off',
    '@typescript-eslint/comma-dangle': ['error', 'never'],
    'indent': 'off',
    '@typescript-eslint/indent': ['error', 2],
    'semi-style': ['error', 'first'],
    'semi-spacing': ['error', { after: true, before: false }],
    'semi': 'off',
    '@typescript-eslint/semi': ['error', 'never', { beforeStatementContinuationChars: 'never' }],
    'no-extra-semi': 'off',
    '@typescript-eslint/no-extra-semi': ['error'],
    'space-before-function-paren': 'off',
    '@typescript-eslint/space-before-function-paren': ['error', 'never'],
    'no-undef': 'off',
    'no-useless-catch': 'off',
    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
    '@typescript-eslint/member-delimiter-style': ['error', {
      'multiline': {
        'delimiter': 'comma',
        'requireLast': false
      },
      'singleline': {
        'delimiter': 'comma',
        'requireLast': false
      }
    }],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/explicit-member-accessibility': [
      'warn',
      { accessibility: 'explicit' }
    ],
    'no-unexpected-multiline': 'error',
    'no-unreachable': 'error'
  }
}

hanetsuki

ソースはsrcディレクトリに入っている方が好みなので、移動する。

mkdir src
mv pages src/pages
mv styles src/styles

hanetsuki

https://github.com/aspida/pathpida
ルーティングを管理するのにpathpidaを適応する。

next-setupに従ってパッケージの追加とpackage.jsonのscriptを書き換える

yarn add pathpida npm-run-all --dev

package.json

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:next": "next dev",
    "dev:path": "yarn path -w",
    "build": "yarn path && next build",
    "path": "pathpida -o ./src/lib",
  }
}

$path.tsが出力されるためのディレクトリを用意

mkdir src/lib

$path.tsを出力

npx pathpida

hanetsuki

CSS in JS（Emotion）の導入

emotionをインストール

yarn add @emotion/react

tsconfig.jsonにjsxImportSourceパラメーターを追加する。

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}

babelプラグインを追加

yarn add -D @emotion/babel-plugin

.babelrcを作成して下記内容を記載する。

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

vscode-styled-componentsがvscodeにインストールされていると、色付けされて見やすくなる。

スタイリング例

// src/sryles/pages/index.styles.ts
import { css } from '@emotion/react'

export const container = css`
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`

// src/pages/index.tsx
import type { NextPage } from 'next'
import * as styles from '../styles/pages/index.styles'

const Home: NextPage = () => {
  return (
    <div css={styles.container}></div>
  )
}

hanetsuki

aliasの設定

import { Layout } from '@/components/Layout'とかで呼び出せるようにします。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "/*": ["*"]
    }
    // ...
  }
  // ...
}

このスクラップは2021/08/24にクローズされました