---
# System prepended metadata

title: Next.js チーム
tags: [Next.js]

---

###### tags: `Next.js`

# Next.js チーム
## チームのゴール
ボイラーテンプレート作成

## 勉強会のアジェンダ
1. ゴールの確認
    1-1.ボイラーテンプレートの概要確認
    1-2.SSGでのビルド
2. React基礎
    2-1.JSX
    2-2.
3. Next基礎
    3-1.環境構築
4. GraphQLを利用したCMSとの連携
5. ボイラーテンプレート

みんなへの共有としては、まず　`5.ボイラーテンプレート` を `1.ゴールへの確認` で提示するのが、現状のテーマ作成との比較が容易で、かつその後の学習へのイメージが湧きやすいのかなと思います。

Next.jsチームのゴールは`ボイラーテンプレートの作成`で、2ヶ月後に次のチームに開発を引き継ぐ、というのでどうでしょうか？



# 進捗状況 2022.02.03

## 進捗状況

各自react、nextのチュートリアルを進めて、基礎知識の習得中

### React チュートリアル

[https://ja.reactjs.org/tutorial/tutorial.html](https://ja.reactjs.org/tutorial/tutorial.html)

### Nextチュートリアル

[https://nextjs.org/learn/basics/create-nextjs-app](https://nextjs.org/learn/basics/create-nextjs-app)

[https://qiita.com/thesugar/items/01896c1faa8241e6b1bc](https://qiita.com/thesugar/items/01896c1faa8241e6b1bc)

## 今後の方針

- ワワワのダミー環境をチームでjamstacl化する

### バックエンド

・GraphQLで何ができか

・どんな設定が必要

・GithubCI でビルド + デプロイ設定

・投稿を更新するとGit hub Actionが走るように設定



# 進捗状況 2022.03.04

## 一覧の出力サンプル
https://test-wawawa-2.oikaze.org/events.html
post_type = event の一覧を、GraphQLから取得して出力。

佐野さんが用意されてたNext.jsの構成の中に、rest apiベースで出力している雛形が用意されていたので、GraphQLベースに調整して出力した。

### 課題
詳細の出力サンプルはこれから

## 構成の課題
2022.3.4更新

### NextJs
1. 環境ごとの処理の管理について検討する
2. 各CSS-in-jsやCSS Modulesの環境構築について、メリット・デメリットを検証していきたい

### Wordpress 環境
#### GraphQL
1. GraphQLの学習(どんな設定が必要になるか、どんなことができるのか)

#### Formなどの取り扱い
1. ログインやフォームなど、状態をもつ処理をどうやって処理するか検証していきたい

#### Block Editor
1. せっかく React を学んでいくので、`Block Editor`に関しても検証していきたい

### Github CI
1. buildの際のパフォーマンスを検証していきたい


## GraphQL
[GraphQL API for WordPress](https://www.wpgraphql.com/) を使用。
1. Get Started を参考に、カスタム投稿の event からタイトルのリストを取得。

## NEXT.Js
[佐野さんの開発環境](https://gl.oikaze.jp/dev-ver/ysano-nextjs)をクローンした。


## GitHub CI
1. [GitHub Actions](https://github.com/oikaze-inc/wawawa-2/actions/new)からNode.js を選択し、リポジトリに .github/workflow/node.js.yml が生成される
2. 生成されたymlをボイラーとして、yarn のインストール、buildなどの設定。cacheの設定などでつまづいたので後で検証する。
3. [Actions Secret](https://github.com/oikaze-inc/wawawa-2/settings/secrets/actions) でデプロイキーを設定。ビルドファイルの反映を確認。
4. repository_dispatchを設定し、Wordpressの更新をGitHubでキャッチできるように設定。


## 課題
hook
usesate
useefect
use

