This is a starter template for Learn Next.js.

---

stack

nextjs
microCMS
vercel

---

chakra highcharts

参考

microCMD サンプル

グラフ

highcharts

next-auth

google

デプロイしたらループ

firebase v9 の書き方

import { AuthProvider } from "../public/framework/context/AuthContext";
をコメントアウトしたらループしなくなった

AuthProvider を...pageprops の最短に移動　 no
.env.local の apikey を"で囲む no

firebase.ts の値を直接書く ok

本番で隠したい値は、環境変数を Vercel に登録
Vercel > Setting > Env... > Add New > add 　 ok

LINE リンクで開いた場合、LINE ブラウザでグーグルログインしてないとエラーになる

Twitter

DeveloperPortal にログインして、進めていったらいい
詳細は覚えてない

LINE

LINE Developers にログインして... !!メールアドレスの使用目的を説明するスクリーンショットが無くて断念

問題点

ブラウザにログインしてない場合、error403 になる

DataBase

https://zenn.dev/fjsh/articles/733a1334ffc1c8

Sqlite で動作テスト

開発では動作した
本番では動作しなかった
本番向きではないらしい 中止

Prisma

pscale connect teppy-link main --port 3309

@prisma/adapter を削除、インストールをする

prisma が開発で動作するようになった
本番では動作しない

vercel に env の値を登録

動作しない

pages/blog.tsx から投稿を追加

デプロイでエラー
Type error: Property 'sampleBlog' does not exist on type 'PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation>'.

sampleBlog に統一 ng
DATABASE_URL='mysql://z8...に変更 ng
DATABASE_URL='mysql://na...に変更 ng

schema.prisma に@@map("sampleblog")を追記 ok

画像検索を追加

https://pixabay.com/api/docs/

無限スクロールを追加

npm install react-infinite-scroller

画像検索を追加 2

https://www.flickr.com/
https://syncer.jp/flickr-api-matome

ライセンスについて
https://relaxing-living-life.com/180/

Verup

React のバージョンアップ 17.0.2 > 18.1.0
Next

three.js

https://gltf.pmnd.rs/
https://qiita.com/naberyo34/items/181f817ddd38c74dbc76#blender%E3%81%A7%E8%87%AA%E4%BD%9C%E3%81%97%E3%81%9F%E3%83%A2%E3%83%87%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80

https://threejs.org/docs/#examples/en/controls/OrbitControls

追加予定

サウンド
入力判定 ローマ字入力候補を表示
色を変更
タイピング速度

結果を登録
ランキング

参考サイト

https://graphicbeats.net/

magic.link に変更を検討 cancel

https://dashboard.magic.link/

node のバージョン変更
node v16.14.2 > v17.9.1

prisma/adapter の更新
v3.14 > v4.0

nextauth に変更

LINE 認証があるから

nextauth.js を変更 .js > .ts

↓　

signin を co debug:true を追加 callback を co

prisma.adpter を co

npx prisma generate session が怪しい

vercel > setting > general > Node.jsVersion
16.x > 14.x > 12.x >14.x

prisma の更新。軌道からデプロイまで 404 ページにログインを実装

package.json に追加
"migrate:deploy": "prisma migrate deploy"

nextauth.js に追加 "session:{strategy:"database",maxage:302460*60}

############nextauth に接続できない############## 以下で静的サイトを削除

out を削除

package.json を編集
"build": "next build && next export && next-sitemap --config sitemap.config.js",

"build": "next build && next-sitemap --config sitemap.config.js",

npm run build

ok ############################################

node のバージョンを変更
v17.9.1 > v16.15.1

Vercel node のバージョンを変更
14.x > 16.x

--ここで保存--

ログイン情報の取得

typing の一部を component にまとめる
モーダルを移動
親コンポーネントから子コンポーネントを実行する処理を追加

っしゅ。に対応 ok

キーボードコンポーネントの作成

ゲーム中に別ページに遷移したらイベントが残る

/ページ遷移時の処理
/イベントリスナーを解除

本番環境で実行したら反映されない時がある フィールドの追加など

times がないってエラー <-type が問題?
本番で登録ができない > times や missed を追加してそれが型エラーになってる？

main-shadow を作り直して push から deploy まで実行

#############vercel にデプロイでエラー###############

デプロイしたらこういうエラーがでる Type error: Type '{ userId: string; result: number; course: string; name: string; image: string; times: number; missed: number; }' is not assignable to type '(Without<TypingResultCreateInput, TypingResultUncheckedCreateInput> & TypingResultUncheckedCreateInput) | (Without<...> & TypingResultCreateInput)'.

エラー箇所はこんな感じ name: String(req.body.name), 31 | image: String(req.body.image),

32 | times: Number(req.body.times),

 |           ^

33 | missed: Number(req.body.missed),

prisma/client が vercel にない?

次のいずれかによってデプロイができた

1.上記のオプションをつけて実行してみた npx prisma format && npx prisma db push 　--force-reset

なぜかデプロイできた..

Vercel がキャッシュの型を参照してエラーにしてる？

キャッシュなしでデプロイを実行 とりあえず Vercel の Deployments の画面から実行できる

##########そのうち必要になりそう###########

prisma でテーブルのリレーション https://zenn.dev/kanasugi/articles/e11ba9cdea9911

ESLint の導入

############ nextauth に接続できない##############

schema.prisma の url を本番に変更 ng npm run build

scheme.prisma の acount,user,session がない？

main-shadow をリセット npx prisma db push --accept-data-loss --schema=./prisma/reset.prisma

main-shadow に強制プッシュ npx prisma format && npx prisma db push --accept-data-loss

github からログインできていた頃に戻した?けどログインできない -> 戻せてない prisma が原因?

schema.prisma に shadow-database を追加 -> co しても接続できるから関係ないっぽい

リセットとプッシュを再度実行 接続できていた頃の schema.prisma で上書き

繋がった

#################################################

################ HighCharts with Nextjs #####################

1.annotation 等が表示されない場合は以下のようにする

module 名は公式サイトの js インポートの名前から推測

import Highcharts from "highcharts"; import AnnotationsFactory from "highcharts/modules/annotations"; import highchartsAccessibility from "highcharts/modules/accessibility";

if (typeof window !== undefined) { AnnotationsFactory(Highcharts); highchartsAccessibility(Highcharts); }

https://yubais.net/doc/highcharts/configure.html

###############################################################

素材検索に video とか vector を追加 https://pixabay.com/api/docs/#api_search_videos

オーディオビジュアライザー https://notes.sharesl.net/articles/1846/ https://qiita.com/su3aki/items/24b21e9337732a64bf3e

############## ページ遷移時にイベントを実行 #################

const router = useRouter(); const pageChangeHandler = () => { //この中身が遷移前に実行される document.removeEventListener("keypress", keypress_ivent); document.removeEventListener("keyup", keyup_ivent); }; useEffect(() => { router.events.on("routeChangeStart", pageChangeHandler); return () => { router.events.off("routeChangeStart", pageChangeHandler); }; }, []);

###########################################################

############## 上下中央揃え ##############

display: flex; justify-content: center; align-items: center;

########################################

############## 予定 ###################