🥑
nextjsのセットアップ
はじめに
本記事はnextjsをセットアップする際のまとめになります。
Kazu T+先生での動画を元に作成(というかパクリ)してますのでもし良ければ見てみてください。
動画でのパッケージマネージャーはyarnを使用してますが、本記事ではpnpmを使用します。
pnpmはyarnよりインストールが速く、node_modulesの容量を抑えてくれます。
セットアップするツール
- Nextjs
- TypeScript
- Apollo Client(GraphQL)
- Tailwind
- Prettier
- graphql-codegen
手順
1. pnpmのインストール
npm install --global pnpm
pnpm --version
nodeのバージョンがv14だとインストールできなかったので、最新のv16まで上げました。
2. create-next-app
pnpm dlx create-next-app .
pnpm dlxはyarnでいうnpxになります。
3. Apollo Client + heroicons + cross-fetch のインストール
pnpm 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. 必要なモジュールのインストール
pnpm add -D typescript @types/react@17.0.41 @types/node
5-3. 開発serverの起動
pnpm run 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. 必要なモジュールのインストール
pnpm add tailwindcss@latest postcss@latest autoprefixer@latest
6-2. tailwind.config.jsとpostcss.config.jsの生成。
pnpm dlx 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のインストール
pnpm add -D @graphql-codegen/cli
7-2. graphql-codegenのセットアップ
pnpm 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. プラグインのインストール
pnpm install
7-4. @graphql-codegen/typescriptのインストール
pnpm add -D @graphql-codegen/typescript
7-5. GraphQLの型宣言作成
pnpm gen-types
「7-2-2. 対象URIのエンドポイント」で指定したエンドポイントのサーバを起動させ、
「7-2-3. スキーマの保存場所」で指定したファイルにスキーマを書き実行。
Discussion