🥥

nextjsのセットアップ(yarn)

2022/05/23に公開

GraphQL

はじめに

この記事のyarnバージョンです。

セットアップするツール

Nextjs
TypeScript
Apollo Client(GraphQL)
Tailwind
Prettier
graphql-codegen

手順

1. yarnのインストール

npm install --global yarn
yarn --version

2. create-next-app

npx create-next-app .

3. Apollo Client + heroicons + cross-fetch のインストール

yarn add @apollo/client graphql @apollo/react-hooks cross-fetch @heroicons/react

Apollo Clientは、GraphQLの状態管理ライブラリ。
heroiconsは、かわいいアイコンです。
cross-fetchは、fetchライブラリ。

4. prettierの設定

4-1. ファイルの作成

touch .prettierrc

4-2. `.prettierrc`に設定内容の記述

.prettierrc

    {
        "singleQuote": true,
        "semi": false
    }

vscodeのsettingsでRequire ConfigとFormat On Saveにチェック。

5. TypeScript の導入

5-1. ファイルの作成

touch tsconfig.json

5-2. 必要なモジュールのインストール

yarn add -D typescript @types/react@17.0.41 @types/node

5-3. 開発serverの起動

yarn dev

起動するとtsconfig.jsonに自動で記述される。

5-4. AppPropsに型を追記

_app.jsx

import { AppProps } from 'next/app'

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

    export default MyApp

現在、pagesフォルダにあるファイルの拡張子は.jsもしくは.jsxになっているので、
.tsと.tsxに変更してTypeScriptの型宣言が機能できるようにする。

6. Tailwind CSS の導入

6-1. 必要なモジュールのインストール

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

6-2. `tailwind.config.js`と`postcss.config.js`の生成。

npx tailwindcss init -p

6-3. `tailwind.config.js`の`content`に設定を追記

tailwind.config.js

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    darkMode: false,
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

6-4. `globals.css`の編集

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

7. GraphQL codegen

graphql-codegenとは、GraphQLのSchemaからTSの型定義を自動生成してくれる便利な子です。

7-1. `graphql-codegen/cli`のインストール

yarn add -D @graphql-codegen/cli

7-2. `graphql-codegen`のセットアップ

yarn graphql-codegen init

7-2-1. どのアプリでビルドするか


    Welcome to GraphQL Code Generator!
    Answer few questions and we will setup everything for you.

? What type of application are you building? (Press <space> to select, <a> to toggle all, <i> to 
invert selection, and <enter> to proceed)
>( ) Backend - API or server
 ( ) Application built with Angular
 (*) Application built with React
 ( ) Application built with Stencil
 ( ) Application built with other framework or vanilla JS

今回のプロジェクトはNextjsですので、デフォルトを選択しましょう。

7-2-2. 対象URIのエンドポイント

? Where is your schema?: (path or url) (http://localhost:4000) http://localhost:4000/api/graphql

7-2-3. スキーマの保存場所

? Where are your operations and fragments?: (src/**/*.graphql) queries/**/*.ts

7-2-4. 必要なプラグイン

? Pick plugins: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) TypeScript (required by other typescript plugins)
 (*) TypeScript Operations (operations and fragments)
 (*) TypeScript React Apollo (typed components and HOCs)
 ( ) TypeScript GraphQL files modules (declarations for .graphql files)
 ( ) TypeScript GraphQL document nodes (embedded GraphQL document)
 ( ) Introspection Fragment Matcher (for Apollo Client)
 ( ) Urql Introspection (for Urql Client)

この子が何をしてるのか調べましたがいまいち分からなかったです。
「どのプラグインを利用して型の宣言をしますか？」とかなんですかね？
すみません、調査不足で申し訳ありませんが、デフォルトの3つを選択します。

7-2-5. 型定義の出力場所

? Where to write the output: (src/generated/graphql.tsx) types/generated/graphql.tsx

7-2-6. インストロペクションファイルの作成

? Do you want to generate an introspection file? (Y/n) n

7-2-7. configファイルの作成

? How to name the config file? (codegen.yml) codegen.yml

7-2-8. 実行コマンドの命名

? What script in package.json should run the codegen? gen-types

7-3. プラグインのインストール

yarn

7-4. `@graphql-codegen/typescript`のインストール

yarn add -D @graphql-codegen/typescript

7-5. GraphQLの型宣言作成

yarn gen-types

「7-2-2. 対象URIのエンドポイント」で指定したエンドポイントのサーバを起動させ、
「7-2-3. スキーマの保存場所」で指定したファイルにスキーマを書き実行。