NextJs

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

概要：nextjsのプロジェクトにsitemap.xmlを追加する sitemap.xmlを手動で追加 getServerSideProps関数を使う sitemapは必要のないサイトも多い 概要：nextjsのプロジェクトにsitemap.xmlを追加する nextjsで作成したサイトにsitemapがなかったので、sitemap.xmlを追加する記事 sitemap.xmlを手動で追加 追加するサイトは計４ページのSPAのようなサイトなので、手動でpublic/sitemap.xmlを作成する。 <?xml version="1.0" encoding="UTF-8"?> <urlset …

本記事は 【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…

はじめに この記事は BBSakura Networks Advent Calendar 2023 の 15 日目の記事です。 こんにちは、BBSakura Networks のシステム管理部に所属している澁谷です。普段は BBIX から委託されているシステムなどの開発・運用をメインに業務しています。 今回は新卒かつ Next.js 未経験者の私が、どのように Next.js に触れはじめてフロントエンド開発をしているのかお話ししようと思います。 私自身、学生時代は情報系に属してはいたものの、研究活動で先代が書いた C++ のコードを見よう見まねで真似したり他の言語も軽く触れる程度で入社前は浅…

書きました。 qiita.com

概要：NextjsのサイトをGoogle Analyticsで。。。 公式サイトにサンプル ESlintのキャメルケースのルール 概要：NextjsのサイトをGoogle Analyticsで。。。 Vercelには独自のアクセス解析機能がありますが、nextプロジェクトをGoogle Analyticsで解析しようと実施。 公式サイトにサンプル アクセスないので、あまり関係ないのですが、soften.siteにGoogle Analyticsを仕込みました。 サンプルはNextjsの公式にあります。 github.com 今までにノーマルに専用タグを追加したことがあれば大丈夫です。 サンプル…

Cloud Build と格闘した記録。 tips use secrets build が queued にいるのはなんで? run migration: private pool build, private IP Cloud SQL my code cloudbuild.yaml Dockerfile tips use secrets ref: Use secrets from Secret Manager | Cloud Build Documentation | Google Cloud ポイント - steps のあとに、 availableSecrets の中でアクセスしたい se…

はじめに 前回、 Prisma で検索処理のサンプルを書かせていただきましたが、今回は削除処理のサンプルになります。 lelelemon.hatenablog.com DB定義再掲 schema.prisma schema.prismagenerator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model user { id Int @id @default(autoincrement()) nickname Stri…

nextjs.orgNext.js 13.5から、 next dev --experimental-httpsで、開発サーバをhttpsで立ち上げることができるようになった模様です。めちゃめちゃ便利です。 package.json { "scripts": { "dev": "next dev", "dev:https": "next dev --experimental-https", "build": "next build", "start": "next start", "lint": "next lint" } と、package.jsonのsctiptsに追加しておけば、 yarn…

環境構築 各コマンド // 雛形作成(xxxは雛形名) npx create-next-app xxx // 開発環境スタート npm run dev // ビルド npm run build // ビルドしたものが見れる npm run start VSCodeにNextjs snippetsを入れてnfでタイプ補完 基礎 SSGはビルド時にSSRはリクエスト時にレンダリングされる pagesディレクトリ内のファイルが直接ルーティング先となる aタグ(リロードあり)ではなくLinkコンポーネント(リロードなし)を使う 静的画像はpublicディレクトに入れる cssモジュールはxxx.mod…

はじめに 前回、 Prisma で検索処理のサンプルを書かせていただきましたが、今回は更新処理のサンプルになります。 lelelemon.hatenablog.com DB定義再掲 schema.prisma schema.prismagenerator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model user { id Int @id @default(autoincrement()) nickname Stri…

夏の自由研究でReact使って何か作ろうと思って少しやったが、つまづいてそのまま放置して夏END Versel Mac環境準備 Claudeで作ったものを載せる プッシュしても反映されない Versel Verselというのを使えばS3とかなくても簡単にデプロイできるらしいのでやってみる。 vercel.com Verselにアカウント作って画面にある通りにgithubと連携してNext.jsを選ぶと、githubにnext.jsの空のプロジェクトのリポジトリできたし、ページもできてた。すご nextjs-boilerplate-mocha-ten-44.vercel.app Mac環境準備 …

はじめに みなさん、こんにちは torihaziです 今日はNextjs と RHF(react-hook-form)とZodを使って フォームと入力成功したら簡単なページを表示するような小規模アプリを 練習がてら作っていこうと思います 環境構築はDocker使って、デプロイはvercelとか使えたらなと思ってます どこまでできるかは気力次第です。 スピード感持ってやっていこうと思います 今 朝の9:33なので 11:30までにはいけたらなと。 ではltg 環境構築 ターミナルで作業ディレクトリ作った後に Dockerfileとdocker-compose.yml作ります。 mkdir nex…

はじめに 前回、 Prisma で検索処理のサンプルを書かせていただきましたが、今回は登録処理のサンプルになります。 lelelemon.hatenablog.com DB定義再掲 schema.prisma schema.prismagenerator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model user { id Int @id @default(autoincrement()) nickname Stri…

はじめに みなさん、こんにちは torihaziです。 最近の台風大丈夫でしょうか？ 私の地域では夜中に警報アラームが何度もなって寝つけませんでした。。 土砂崩れも起きているところもあるようですから、 まだまだ気を抜けませんね。 さて、台風もそうですが 今日でWeb開発エンジニアとして働いてみて1ヶ月が立ちました。 そこで振り返りも兼ねて今回は色々と書き記していこうと思います。 「開発未経験として入ったらどんな感じなのか？」 「昔に比べてこいつどうなってるのか？」 「やっぱ大変？」 などなど思い当たることをとにかく書いていこうと思います どなたかの参考になれば幸いです。 それでは8月最後、lt…

概要 個人開発でNext.jsのApp Routerを使用してAPIを実装してクライアントからAPIを呼ぶ実装をしたので、そのやり方を記載します。 使用バージョンは"next": "14.2.5"です。 pagesディレクトリで区切っていた時とは少しやり方が異なっています。 詳しい説明は公式で載せられていますのでご参考まで。 nextjs.org サーバーサイド まずルーティングは以下のようになります。 src/ └── app/ └── api/ └── summarize/ // 自分が実装したいAPIの名前 └── route.ts こうすることでクライアントサイドから以下の形で呼び出す…

下記のチュートリアルをやってみる https://firebase.google.com/codelabs/firebase-nextjs?hl=ja#0 ※pnpmを使う pnpm dlx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install firebaseのプロジェクトを設定する - 有料プランにする - Authenticationを有効化 - Firestoreを有効化 - Cloud Storageを有効化