tYoshiyuki / next-apollo-hands-on

概要

• Next.js + ApolloClientのハンズオン用のセットアップ済みリポジトリです。
  • GitHubのGraphQL APIに対して各種リクエストができるようになっています。
• クローンして使ってください。

Getting Started

• まずは各種パッケージをインストールしてください。

yarn install

• GitHubのPersonal Access Tokenを作成してトークンをコピーしておいてください。

  • 権限はrepoがあればOKです。

• 次にenv.local.sampleをコピーしNEXT_PUBLIC_GITHUB_TOKENに先程のトークンを貼り付けます。

cp .env.local.sample .env.local

• 下記コマンドで開発環境を立ち上げて、http://localhost:3000 をブラウザで開くとサンプル画面が表示されます。

yarn dev

• lib/graphql 配下にクエリなどのファイルを配置しています。

  • 追加、更新した場合は下記コマンドでTypeScirptの型定義やReact Hooksの更新が行えます。

      yarn generate

ハンズオン

• Next.js, Apollo Client概要
  • Next.js, Apollo Clientについての概要や、その前段となるTypeScriptなどについての講義などフロントエンドの開発経験があまりない人を対象にしたハンズオンです。
• Next.js
  • React Hooksや、SSR, SSGなど普段Next.jsで軽微な修正はやっていて、新規ページの実装は不安くらいのレベル感の人を対象にしたハンズオンです。

事前準備

• node.js のインストールをお願いします。
  • 複数のリポジトリの開発を行う場合、要求される node のバージョンが異なることが多いため、nodenv を用いたインストールを強く推奨します。 nodenv の環境構築 - Qiita
    • rbenv など複数の〇〇 env を使ってる場合は anyenv 経由でのインストールがおすすめです。
  • node16 以降が手元に入っている場合今回はスキップでも OK です。
  • node.js なんか普段使わんし知らんわ！という方はインストーラーを使っても大丈夫です。 ダウンロード | Node.js
• node を入れたらnpm install -g yarn で yarn をインストールしてください。
• https://github.com/zuckey117/next-apollo-hands-on をクローンしておいてください。準備は以上です。

おすすめ資料・便利ツール

フロントエンド全般

• Can I use...

  • HTML, CSS, JS などの各種機能のブラウザ実装状況が一括で確認できます。

• JSer.info

  • JS 関連の各種最新情報を日本語で追える便利ブログです。

JavaScript

JS全般

• JavaScript Primer

Promise, async/await

• JavaScript Promise の本
• JavaScript での非同期処理の基本 - 🐾 Nekonote

TypeScript

TypeScript全般

• TypeScript Deep Dive
  • 日本語訳 TypeScript Deep Dive 日本語版について
  • 英語原本 README

型

• TypeScript の型入門 - Qiita

React

• React Docs BETA - Learn React Quick Start
  • 英語ドキュメントですが、関数コンポーネント前提で書かれていて今どきの React の書き方のみを効率的に学ぶことができます。

Next.js

• 公式のドキュメントがわかりやすいです。 Getting Started | Next.js
  • 非公式ですが日本語訳もあります はじめに | Next.js