Zenn
Open5

Next.js、Hasura本での学習記録

GraphQL
Next.js
初心者
thasmtthasmt

はじめに

技術書典9で出版された『実践プロトタイピング 〜Webフロントエンド＆バックエンドでプロトタイピング〜』という書籍を読む際の学習記録に使いたいと思います。
Reactはある程度書けるようになりましたが、Next.jsは触ったことがなく初学者にとっていい本がないかと探していたところ、HasuraやGraphql、Next.jsの使い方を学びながら実践的なプロトタイピングの方法も学ぶことができる本というとことで本書を読んで勉強してみようと思います。

また、書籍で学んだことをそのまま記事形式でアウトプットすることは自分にとってハードルが高く敬遠しがちでしたが、このスクラップ機能は初学者でも気軽に投稿できそうだったんで試してみたいという気持ちもありました。

※記録する内容は自分が忘れそうな箇所や後で見なおそうと思う箇所をざっくりメモする程度なので、本書で書かれていること全てを網羅的に記載するわけではありません。

thasmtthasmt

Nextを使う

create-next-appを使ったセットアップ

#yarnの場合
yarn create next-app <アプリケーション名>
#npmの場合
npx creawte-next-app <アプリケーション名>

開発用サーバーを起動

#yarnの場合
yarn dev 
#npmの場合
npm run dev

Next.jsのコンポーネントについて

Headというコンポーネントを使ってページごとのHTMLヘッダーを設定できる。

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>
  )
}

また、CSS Modules はデフォルトでサポートされている。

thasmtthasmt

Pages（動的ルーティング）
pagesディレクトリ配下のページコンポーネントファイルのファイル名に角括弧を使うことでクエリとして取得できる。
取得するときはuseRouterを使う。

[userId].js
const router = useRouter()
const { userId } = router.query

/pages/_app.jsやpages/_document.jsはアプリケーションの初期化時に一度だけ実行される。
グローバルなCSSを適用するなどできる。

/public/配下は静的なファイルとして使うことができる。

/pages/api以下はサーバー側のコードとして処理される。

thasmtthasmt

ローカルで開発

Next.jsはローカルで動かす。Hasura GraphQL Engine と PostgreSQL は Docker で動かす。

Next.jsのプロジェクトを作成してにTypeScriptを導入する

npx create-next-app sample-app
cd sample-app
npm i --save-dev typescript @types/node @types/react @types/react-dom

tsconfig.jsonファイルを新しく作成する必要がある。
pages/ と styles/ フォルダのようなディレクトリ構成は一般的ではないので削除してかまわない。
代わりに src/pages フォルダを新しく作成。

jestをインストール

npm i --save-dev jest @types/jest ts-jest
thasmtthasmt

Hasura GraphQL Engine を動かす準備

wget https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml を実行すると Hasura GraphQL EngineとPostgreSQLを動かすためのdocker-compose.yamlファイルを取得できる。

Hasura GraphQL Engine を起動したときに、自動でコンソールが立ち上がらないように設定を変更する。

docker-compose.yaml
environment: 2: HASURA_GRAPHQL_ENABLE_CONSOLE: "false" # set to "false" to disable console

docker-compose upでDockerを起動できる。

以下のコマンドでマイグレーション情報を保存するディレクトリを作成。

npm install --save-dev hasura-cli
npx hasura init hasura

以下コマンドでコンソールを起動してHasura GraphQL Engineが動いているか確認できる。

npx hasura console --project hasura