Next.js

こんにちは王子です。 最近は恐竜が闊歩するオープンワールドで過酷なサバイバルに挑むアクションゲーム「ARK: Survival Ascended」にハマっています。 旧Arkもひたすら遊んだので目新しさはありませんが、最初からIslandでプレイしてテリジノサウルスやアルゲンタヴィスをテイム＆ライドするくらいまで進みました。 打倒！ブルードマザー！！ さて、ここ数日、SSR(Server-Side-Rendering)方式の実現方法について調査する機会がありました。 SPA/SSR/SSGについては本記事の主題ではありませんので、先に簡略な表現で記載すると下記のようになるでしょうか。 SPA(…

shadcn/uiを使ったサジェストフォームのサンプルとして下記のようなものがあります。 https://www.armand-salle.fr/post/autocomplete-select-shadcn-ui 運営されているarmandさんのgithubのソースコード placeof - プレイスオブの物件スペックを入力する画面では、このサンプルにreact-hook-formやzodを使った実装をしています。 suggestのロジックの変更 上記実装で使われている、shadcn/uiのCombobox はcmdkのComboboxをwrapしたものです。suggestのロジックを変更し…

Redux とは、状態管理モジュールの1つで、 Fulx アーキテクチャの影響を受けて作られたものです。 Vuex の React 版みたいな感じです。 Vuex は Vue 用の状態管理モジュールです。 だいたい Store とか State などの単語が登場します Next.js プロジェクトに導入しようとしたら、 ちょっとハマったので記録に残しておきます。

docs.obniz.com この記事も1ヶ月ほど前のハッカソンで使用したネタです。 初めて使ったのでまとめておきます。 Grove_EarHeartRate という心拍センサーを Web アプリ上から使うときのメモです。今回は React Component として使えるようにしました。

あるプロジェクトで Page routing の Next.js を SSG で作成したサイトを Vercel でホスティングしたものを CloudFront と Lambda@Edge を使って別ドメインの URL からサイトを表示させるようにしていた。 図で書くとこんな感じ CloudFront を使った別ドメイン (b.com/foo) からサイトを見たときだけページ内リンク (next/link) で遷移時にアプリがクラッシュしてしまう問題が発生した。 すっごくレアケースだと思うけど記録としてメモしておく 環境 Next 13.5.4 React 18.2.0 TypeScript 5…

この記事は Next.js を使っている方を対象にしています。 物話は少しフィクションです。 始まり ある日、お世話になっているお店の店主からこんな依頼がありました。 パソコン得意なんだよね、うちの店のホームページ作ってよ！ お知らせと商品情報は更新出来るようにしたい！ WordPress… なにそれ？ Google スプレッドシートだったら使ったことあるよ。 こういう場合はノーコードツールが望ましいかと思ったのですが、Google スプレッドシートを CMS 替わりに出来たら何かと便利だと思い、実際に作ってみることにしました。 構成 普段キカガクの業務でも使っている Next.js と、GA…

<Image src="/images/hoge.png" alt="" ... /> Next/Imageでの↑ように画像表示をしている状態で画像の配信構成を変えたら表示が全滅した。 before flowchart LR UA --> CloudFront CloudFront -- default --> Next.js after flowchart LR UA --> CloudFront CloudFront -- default --> Next.js CloudFront -- /images/* --> S3 にしてNext.jsのコンテナイメージ*1からは画像を消し飛ばした…

メインはWindowsのゲーミングノート 最近MacBook Air M1買い足しました🙌 React/Next.jsを覚えていたんですが 転職予定なので使う可能性のあるVueとSwiftの勉強を始めました。

はじめに こんにちは、インダストリーワン エンジニアの松崎です。 Next.js & FastAPI & PostgreSQL on Docker と題して、フロントエンドにNext.js、バックエンドにFastAPI、データベースにPostgreSQLを採用してサクッと技術検証できるようにするための第一段階としてDocker Composeで動作環境が構築できるようにしたので記事にします。 サクッと技術検証できるようにしたかった理由としては、プロダクトにそのまま流用したいというよりもライブラリなどをサンドボックス的に試したかったからです。 技術の選定理由については、個人的な興味によるものです…

9時ころ起床。 歯医者へ。1年半ぶりくらいになる。治療を終えて定期検診フェーズになり、毎回半年後の予定を入れるのだがその時たまたま用事があっていけなくて……からの1年半放置。あかんやつだ……。 幸い、特に問題は無いようだった。歯磨きはしっかり出来ている。とのこと。ドルツ様々だ。一方、フロスはちゃんと毎日やりましょうとのこと。はい……。 【2023年発売】パナソニック 音波振動ハブラシ ドルツ 最上位モデル W音波振動 Bluetooth搭載 ライトリング機能 充電スタンド 携帯ケース付 ディープネイビー EW-DT73-A パナソニック(Panasonic) Amazon 午後は部屋の片付け。…

takepepeさんの新しい本『実践Next.js』を読んだのでメモ 実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書作者:吉井 健文技術評論社Amazon AppRouterは使ったことがなかったので、この本で情報のキャッチアップをしたい 本の内容は４章まではAppRouterの基礎情報で、それ以降はかなり実践的なサンプルアプリの実装の話 自分としては以前からNext.jsのPagesRouterは使っていたので、あの機能はAppRouterではどうなるのかという差分を中心に読んでいった 全体的にかなり分かりやすくまとまっていたので、とても読みやすかっ…

いろいろありエンジニアっぽい副業探してます。よろしくお願いします。 希望 時給1000円~ タイミーのコンビニバイトがこれくらいだった フルリモートワーク 京都にいるので近辺なら出社できますが... 平日の朝/夜、または土日の勤務 日中10:00~19:00は本職なので 週2~3だと嬉しいです 単発でも全然OKです やれること バックエンドWebアプリ開発 Perlで定型なWebアプリケーションをそこそこ早くつくれます GraphQLのresolverもかける golangもある程度かけます TypeScriptはサーバーサイドっぽいのは書いたこと無いですが可能です RubyやPHPは多少助走…

こんにちはKen2です。 私はフリーランスエンジニアとして働きながら不動産投資をやってその二刀流で生きてる人間です。今日はエンジニアとしての話だけどエンジニアと無関係の人にも参考になるかも？と思う。 主題「得意なことは案外、苦手なことのすぐ近くにあるかもしれないって話」 一口にプログラミングといっても色々な言語があり、いろいろな職種があり、いろんなジャンルがあります。 プログラマーになることを志してから、あるジャンルに手を出しては挫折して、またあるジャンルに手を出しては挫折して…それを繰り返してきました。 私の遍歴はたしかこんな感じ。 まず最初、 swift(iosアプリ開発) ->java(…

長らくVue.jsだったWhalebirdをReact.jsで書き直した．というよりNext.jsになった． github.com 当初，Svelteで書き直してみたんだけど，これがあまり思い通りにはならないことがわかって，Next.jsでの書き直しになった． 6.0.0がNext.jsの初版で，6.1.0まで来たところで，まぁ少しは使えるようになってきたので書き残しておく． まず，最初に書き直しを考えたのは2023年の4月くらいだ．2023年の改修で，今までNode.js側のストアとしてnedbを使っていたものをbetter-sqlite3に置き換えていた．これは単純にセキュリティ的な理由と…

前回は、LINEBot用のスクリプトを作成しましたが、その際はNgrokをつかって公開し、動作を確認しました。blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.orgしかし、実際に永続的に運用していこうとなると、APIとしてどこかしらで動かし続けた方がよさそうです。 前回は、Next.jsのPage Routerを使って、VercelかNetlifyで公開してみましたが、今回はApp Routerを使って公開してみます。blog.kimizuka.org ソースコード .env CHANNEL_SECRET=LINEのチャネルシークレットを記載 C…

1年ほど前から Next.js v13 と Azure Static Web Apps を使って Hybrid rendering を行う Next.js アプリケーションをデプロイしていました。 v14 にアップデートしたタイミングでビルドに失敗するようになってしまいました。 直し方が Microsoft Learn にあったのでメモがてら載せておきます。 learn.microsoft.com ビルドに使用する Node.js のバージョンの指定 私はデプロイに GitHub Actions の Azure/static-web-apps-deploy@v1 を使用しています。 デプロイの…

チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探し…