Zenn
⛳

Next.js + TypeScript でformを作成する。STEP1 環境セットアップ

2021/10/22に公開
Next.js
React
TypeScript
初心者
tech

Next.jsとTypeScriptとEmotionをつかってformを作っていきたいと思います。
実装の過程も一緒に記事にしていこうと思います。
これから学習される方のお役に立てれば幸いです。

Next.jsの開発環境を準備する

Next.jsの開発環境を用意するのはとても簡単です。
公式サイトDocsに従ってコマンドを実行するだけで開発環境が完成します。

create-next-app

npx create-next-app@latest
# or
yarn create next-app

今回はTypeScriptも利用したいので下記のコマンドを利用します。

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

next, react, react-domのインストール

npm install next react react-dom
# or
yarn add next react react-dom

localhostで確認

npm run dev or yarn dev

http://localhost:3000に接続すればブラウザで表示を確認できると思います。

./pages/index.tsxの記述を変更すると画面が変わると思います。

公式サイト

Emotionを使えるようにしたい

yarnでいくつかインストールしていきます。

yarn add @emotion/react  
yarn add @emotion/eslint-plugin
yarn add @emotion/babel-plugin
yarn add @emotion/babel-preset-css-prop

さらに.babelrcと.eslintに記述を追加します。

.babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": [
    "@emotion/babel-plugin"
  ]
}
.esliint
{
  "plugins": ["@emotion"],
  "rules": {
    "@emotion/jsx-import": "error",
    "@emotion/pkg-renaming": "error"
  }
}

これで.tsx内にCSSを下記のように記述できるようになると思います。

import type { NextPage } from 'next';
import { css } from '@emotion/react';

const styles = {
  container: css`
    width: 375px;
    margin: 0 auto;
    background-color: #fff;
  `,
};

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

vscodeを利用されている方はハイライトや補完をさせたくなると思います。
通常設定だと無理なので「vscode-styled-components
」というプラグインを入れましょう。

これでおおよその開発環境が整えられたかと思います。

公式サイト

Discussion