【Qiita API × microCMS】Next.jsでTech Blogを作ってみた
はじめに 1か月ほど前からNext.jsを学び始めました。 今回はNext.jsでTech Blogを作成してみました。 Qiita APIとmicroCMSに登録したデータを使い、記事を表示さ...
1
0
Comment0
73 search resultsShowing 1~20 results
Stocked
You need to log-in
httpステータスコードを覚えるためにゲームを作りました！
はじめに 皆さんはhttpステータスコードをいくつ覚えているでしょうか？ 私は500番台がサーバーエラーで、400番台がクライアント側のエラー、200が成功で……ぐらいのざっくり有名なステータス...
4
1
Comment0
Application error: a server-side exception has occurred (see the server logs for more information).エラーでページが表示されない
はじめに next.jsをfirebaseにデプロイしようとした際に、ページが表示されず悩んだので解決策を載せておきます。 事象 next.jsをfirebaseにデプロイしました。 fireb...
1
1
Comment0
next.jsのbuild時に出たいくつかのエラーの解決方法
はじめに next.jsをbuildした際にエラーが出て、buildできませんでした。 いくつかエラーが出たので。その解決方法についてまとめたいと思います。 ①Type error: Route...
4
2
Comment1
【個人開発】【Gemini × DALL-E3】AIに思い出を絵本にしてもらうアプリを開発
はじめに Reactの勉強を今年の8月から始めました。 最初は全く無知の状態でしたが、今回のアプリを開発できるまで成長することができました。 どういうアプリか、開発までどんな道のりだったか紹介し...
31
15
Comment1
AIに思い出を絵本にしてもらうアプリの技術的な解説
はじめに 前回AIに日記から絵本を作成したもらうアプリの記事を投稿しました。 この記事の技術的な部分について、もう少し触れておきたいなと思ったので記事にしたいと思います。 アプリの簡単な説明 前...
7
7
Comment0
Next.jsでfirebaseにデプロイできない
はじめに next.jsをfirebaseにデプロイしようとしていたのですが、うまくデプロイできずコードがページ上に反映されませんでした。 いくつか試して解決できたので、まとめようと思います。 ...
1
0
Comment0
Makefile:2: *** missing separator. Stop.エラーでMakefileが実行できない
はじめに makefileを実行する際にエラーが出たので、解決方法をまとめます。 事象 以下のMakefileを実行しようとした際にエラーが発生 Makefile deploy: npm run...
2
1
Comment0
【React × TypeScript】デジタル名刺を作成できるアプリを開発
はじめに React学習を始めて、２か月立ちました。 今回はデジタル名刺アプリを開発しました。 アプリの詳細とどのような技術を使用したかなどを紹介していきたいと思います。 デジタル名刺アプリ 今...
3
1
Comment0
初ハッカソンに参加して、2日でAIアプリを開発！
はじめに 先日、参加しているコミュニティのハッカソンに参加しました。 「AIで日常を魔法に」というテーマのもと、2日間のうちにアイデアを出し、アプリを開発しました。 初めてハッカソンに参加してみ...
3
1
Comment0
if (!supabaseUrl) throw new Error('supabaseUrl is required.')でtsファイル実行できない
はじめに TypeScriptのファイル.tsを実行して、supabaseのテーブルデータを削除しようとしましたが、エラーで詰まってしまいました。 解決に時間がかかったので解決策をまとめます。 ...
4
1
Comment0
jestでNumber of calls: 0となり、関数が実行されない
はじめに jestでtestを行っている際に、関数が実行されず、テストが失敗しました。 解決まで、時間をとられたので解決策をまとめようと思います。 事象 新規登録ページを作成し、そのテストを行い...
2
1
Comment0
react-hook-formのwatchでフォームの入力された値を表示する
はじめに react-hook-formを使っていて、watchというフォームの値を監視する便利なものを見つけたので使い方をまとめたいと思います。 watchとは react-hook-form...
3
1
Comment0
【Chakra UI × React × TypeScript】簡単に導入できるChakra UIを使用してReact学習記録アプリを開発！
はじめに React学習を始めて、約1か月が立ち、振り返るとかなり多くの事柄を学んできました。 今回は、1か月目でChakra UIを使用したアプリを開発してみました。 学習記録アプリは以前にも...
13
10
Comment0
React Hook Formでデフォルト値を設定する方法
はじめに React Hook Formを使用して、登録されているレコードの値があればモーダルのフォームに値を埋めた状態で、表示したかったのですが、結構実装に時間がかかったのでやり方を残しておき...
1
1
Comment0
【supabase × firebase × GithubActions】React学習記録アプリをグレードアップさせる
はじめに 学習記録アプリを以前作成しました。 今回は、さらに学習記録アプリをグレードアップしました。 以前作成したアプリ 以前作成したアプリは学習内容と学習時間を入力し、登録できるアプリでした。...
1
0
Comment0
wicked_pdfの代わりにFerrumを導入する方法
はじめに wicked_pdfで使用されているWkHtmlToPDFというgemが2023/1/2にアーカイブされました。 更新が行われなくなるため、維持のリスクが高まってきます。 そこで、wi...
5
2
Comment0
GithubActions jobの重複部分を共通化したい
はじめに GithubActionsを使用していて、firebaseにデプロイを行っていました。ymlファイルのjobのコードで共通部分がいくつかあったため、共通化して呼び出せるようにしたいと思...
1
1
Comment0
React Router v6でのネストの書き方で詰まったところ
はじめに React Router v6の書き方で特に詰まったところを上げたいと思います コンポーネントの配下にコンポーネントをレンダリングする場合 v5での書き方 v5の場合はswitchの中...
1
1
Comment0
useStateの値を更新したのに古い値が表示される
はじめに ReactのuseStateを使用した際の処理で引っかかった点があったのでまとめてみようと思います。 事象 以下のようなbuttonがクリックされたら配列の中身を表示する処理があります...
2
1
Comment2
73 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles