NextJs

Next.js でGemini APIを利用する最小限のサンプルプログラムを作る。 アプリケーションを作成する GeminiのNodeライブラリをインストールする ページの作成 .env action.ts page.tsx 実行 まとめ アプリケーションを作成する Automatic installationを実行してデフォルトのままで作成する。 $ npx create-next-app@latest Need to install the following packages: [email protected] Ok to proceed? (y) y ✔ What is y…

はじめに Jest でテストコードを作成する過程で下記の jest.config.js と babel.config.js を作成していたものの、NextJs でアプリ起動時に掲題のエラーが出てハマったのでその対応メモになります。 jest.config.js module.exports = { testEnvironment: "jest-environment-jsdom", transform: { "^.+\\.(ts|tsx)$": "babel-jest", // TypeScriptファイルをトランスパイル "^.+\\.(js|jsx)$": "babel-jest", //…

Google 検索等では、1 文字打つごとに検索候補の取得が走って、表示が更新されます。 今回はこれと似たような機能を Next.js (MUI) と OpenSearch, Go を用いて実装してみます。 [目次] やること やらないこと OpenSearch の設定 Index/Search-template の作成 dummy data の投入 ユースケース: suggestion に利用 ユースケース: 検索ワード別の結果集計 ユースケース: 人・期間（daily）別、検索結果。 curl で叩く例 API の実装 Front の実装 おわりに やること 本体となる検索システムがあると…

javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術ス…

本記事は 【Advent Calendar 2023】 25日目の記事です。 🎁 24日目② ▶▶Merry Christmas!! 🎄 こんにちは！志水です。最近はインフルや胃腸炎流行ってますね。私も漏れなく胃腸炎貰いましたが、発症直前にカレー食べてて、胃腸炎で苦しんでる時にカレーの香りで更に苦しみ続け、おかげさまでカレーが食べれなくなりました。 はじめに さて、本記事はネットコムのアドベントカレンダーの最終日なので、アドベントカレンダー作ろうと思います（？） というのも、今回のアドベントカレンダーは下記で一覧が見れる状態なのですが、全部の記事が一目で分かるページが欲しいと思って作ろうと思い…

はじめに Hygenとは？ Hygen を用いて解決したいこと 導入方法 install 初期化 対話型コードジェネレーターの作成 新規ジェネレーターの作成 プロンプトの作成 テンプレートファイルの作成 実際に使ってみる 感想 参考 はじめに こんにちは、retail HUBで Software Engineer をしているほんだです。 この記事は、every Tech Blog Advent Calendar 2023 tech.every.tv 20 日目の記事です。他にもたくさんの記事が掲載されているのでぜひ確認してみてください。 今回は私が入社後初めて技術選定から参加した retail…

はじめに 設計(再掲) Style周りの環境構築 UIライブラリの選定 CSS-in-JSの選定 Stitchesの導入 NextUIの導入 CDS作成 一覧画面 Cardコンポーネント headerコンポーネント footerの作成 style整え 詳細ページの作成 ページの枠の作成 ざっくりとレイアウト作成 リファクタリング Styleコンポーネントからcss propsに。 prettierの設定 突然だけど... はじめに これの続きな？ ayumu1212.hatenablog.com 以下実装 設計(再掲) Style周りの環境構築 アプリ作っていく前にUIライブラリとcss-in…

想定読者： obsidianの導入を検討し始めた obsidianって何か知りたい Notionとの違いを知りたい はじめに 最近Obsidianを導入しました。 以下、私の簡単なプロフィールです。 情報系専攻理系大学院生 趣味でWebサービス開発等行っている 学部2年からNotionを使ってバイトや勉強等を管理 普段からよく考え事をする もし何か共通項があれば、読者の方もObsidianが魅力的に映るかもしれません 1. Obsidianとは Obsidianとはざっくりいうと「ローカルで動くマークダウンエディタを便利にしたやつ」です。 クロスプラットフォームで開発されているため、MacやW…

この記事は、フラー株式会社 Advent Calendar 2024の15日目の記事です。 14日目は、@nirazoさんの 「GraphHopper Directions APIでランダム周回ルートを楽しむ」でした。 グミが大好きなnirazoさんに今年美味しかったグミを聞いたところ、忍者めし 鉄の鎧とのことでした。きになる。 はじめに 当初は「Next.js（App Router）にSAML SSOを導入する話」をしようと思っていたんですが、検証が想像以上に難航してしまったため、別の話題で書くことにしました。 Next.js 15.1がリリース 先日、Next.jsの最新バージョン v15…

Remixを触ってみたいと思っていたら、React Router v7に統合されてしまいました。 そんなReact Routerでプロジェクトを作成し、PrismaとVitestを導入してテストを書き始める準備について書きました。 React Routerでプロジェクト作成 docker composeでDBを用意 Prisma導入 スキーマ定義 開発用とテスト用のDBをそれぞれ作成 Seeding Vitest導入 vite.config.tsの設定 tsconfig.jsonの設定 テストを書いてみる さいごに React Routerでプロジェクト作成 プロジェクトの作成は以下を実行しま…

この記事は、NFLaboratories Advent Calendar 2024 6日目の記事*1です。研究開発部 研究開発担当のda13daです。 今回の記事では、パスワードレスな認証を可能とするパスキーを提供する「Hanko」というサービスをご紹介します。 はじめに パスキーとは Hankoの提供形態 OSSプロダクト Hanko Cloud 利用方法 projectタイプについて Hanko Passkey Infrastructure 実装について ログイン ユーザー情報の取得 パスキーAPIについて 主なAPIエンドポイント 終わりに はじめに 従来のID/パスワード認証は、多くの…

kubell Advent Calendar 2024 の投稿です。 [^4] qiita.com この投稿では、AWS Distro for OpenTelemetry (ADOT) [^2] を用いた Next.js の計測について書きます。

グローバルなレストラン予約サービス、AutoReserveの開発をしているjavascripterです。 今回は、ハローでのautoreserve.comのアーキテクチャの変遷についてお話しします。 概要 AutoReserveは最初Next.jsで構築され、その後SPAに移行し、最終的に再びNext.jsに戻るという珍しい技術選択をしています。 この記事では、各アーキテクチャの移行の背景と、大規模アプリケーションの段階的移行の実践について解説します。 AutoReserveについて AutoReserveは世界中のレストランの予約が可能なグローバルサービスです。iOS・Android・Web…

いつも通り、 npx create-next-app .で、Next.jsのプロジェクトを作成し、 npm run devで、開発サーバを起動したところ、左下に謎のアイコンが表示されるようになっていました。 .nextjs-toastというクラス名が振られています。なんだこれは。と思いましたが、すべてドキュメントに書いてありました。nextjs.org Next.js displays a static indicator in the bottom corner of the screen that signals if a route will be prerendered at buil…

はじめに こちらはバイセルテクノロジーズ Advent Calendar 2024の 2日目の記事です。 前日の記事は早瀬さんの「3年間に及ぶ新規プロダクト開発の技術選定の振り返り」でした。 こんにちは！株式会社BuySell Technologiesのテクノロジー戦略本部開発2部で、バックエンド領域でテックリードをしている藤澤です。 前日の記事でも紹介されましたが、この度3年の開発期間を経てEXSというEC出品管理システムがリリースを迎えました。 プロジェクトの立ち上げから携わらせて頂いたシステムがなんとかリリースを迎えることができ、チーム一同感無量でした。 既存のシステムからの切り替えとい…

この記事は株式会社ヘンリー - Qiita Advent Calendar 2024 - Qiita の1日目の記事です。 ヘンリーで SRE をやっています id:nabeop です。会社では SRE の他に有志で集まっている技術広報ギルドに参加していて、社内と社外の両方の面で技術広報的なこともやっています。 技術広報ギルド内での活動の一環で毎週開催されている技術勉強会 (ギベン) [^giben]の月初の会では前月分のエンジニアのアウトプットを眺める会をやっています。その中の1コンテンツとして、この株式会社ヘンリー エンジニアブログの Google Analytics のデータを眺めて、前…

移行しました。ペライチなのでそんなに難しいことはないだろうと思ったけど、細々とハマりどころがありました。 utgw.net 前回の移行はこちら。 blog.utgw.net 前提 Next.js 13.4.9 Static HTML ExportをしたものをNetlifyにデプロイしている リダイレクト設定がある https://utgw.net/labs/tatsuya.htm → https://sugarheart.utgw.net/labs/tatsuya.htm モチベーション 今回の移行のモチベーションは、「おもしろ全部」が8割、Next.js製WebアプリケーションをLambda…