「Next.js」に関連する技術ブログ

企業やコミュニティが発信する「Next.js」に関連する技術ブログの一覧です。

Reactのフレームワーク”Next.js”を触ってみた「動的ルート / APIルート」

こんにちは、エンジニアのみーや( @miiya387 )です。 Reactのフレームワーク「Next.js」への入門として、公式チュートリアルを何回かに分けてまとめていきます。 今回は、5. Dynamic Routes と 6. API Routesについてまとめていきます。 それ以前の章を知りたい方は各章に過去記事のリンクを付けておりますのでそちらからご覧ください。 Create a Next.js App Navigate Between Pages Assets, Metad

Cloud Build上でNext.jsのコンテナイメージのビルド速度を改善した話

はじめに SREチームの磯村です。 去年入社してからフロントエンドエンジニアとして働いていましたが今年6月からはSREチームに転属しました。 SRE見習いとして奮闘中です。 コミューンはアプリケーションの基盤としてGoogle CloudのCloud Runを利用しています。 そしてCloud Runで実行するコンテナイメージをCloud Build上でビルドしています。 この記事ではCloud Build上でのコンテナ

Cloud Build上でNext.jsのコンテナイメージのビルド速度を改善した話

はじめに SREチームの磯村です。 去年入社してからフロントエンドエンジニアとして働いていましたが今年6月からはSREチームに転属しました。 SRE見習いとして奮闘中です。 コミューンはアプリケーションの基盤としてGoogle CloudのCloud Runを利用しています。 そしてCloud Runで実行するコンテナイメージをCloud Build上でビルドしています。 この記事ではCloud Build上でのコンテナ

Nextのstandalone機能のビルドサイズを通常ビルドと比較する

どうも、インターンの手塚です。今回は、Next.jsのstandaloneという機能に焦点を当てた記事を書こうと思います。standalone機能がビルドサイズをどれだけ小さくするのかを確認してみましょう。 目次 standalone機能とは standalone公式ドキュメント // next.config.js module.exports = { output: 'standalone', } 公式ドキュメントにもあるように、 next.config.js に上のように書くことで standalone

【Next.js】Server Side RenderingでABテスト(Google Optimize)を実装した話

はじめに 初めまして、レバレジーズ株式会社の小林といいます。 私は2022年4月に開発未経験でエンジニアとして中途入社し、teratailというサービスのフロントエンド開発とマーケティング周りの業務に携わっています。 teratailでは、昨年末にリプレイスを行ったこともあり分析基盤がきちんと整備されておらず、各種分析ツール(Google Analytics4やBigQuery、Google Optimizeなど)

T3 Stack でアプリを構築して実行してみた

はじめに こんにちは、クラウドエースの伊藝です。 最近、T3 Stack というワードが話題になっています。 以下で紹介されているように、簡潔さ、モジュール性、フルスタックの型安全を重視した技術スタックです。 https://zenn.dev/mikinovation/articles/20220911-t3-stack T3 Stack は以下のパッケージで構成されています。 Next.js tRPC Tailwind CSS TypeScript Prisma NextAuth.js 今回は T3 Stack アプリを

Rails+Next.jsでGraphQLを導入する時に考えたこと

こんにちは、タイミー開発プラットフォームチームで業務委託として働いている 宮城 です。 タイミーはリリースから4年が経過したプロダクトで、2022年の前半から一部領域でGraphQLを利用し始め現在導入を進めています。 本記事では、GraphQLをプロダクトに導入する上で判断に迷った箇所や課題に対して、タイミーでの意思決定とその理由を紹介します。参考にしていただ

NIFTY Tech Talk #4 レガシーシステムからの脱却に登壇しました!

はじめに こんにちは!新卒入社6年目の添野です。@niftyトップページシステムの開発・運用を担当しています。 先日「レガシーシステムからの脱却」に登壇しましたので、その様子を紹介していきます! イベント概要 NIFTY Tech Talk は、ニフティ株式会社の社員が主催するトークイベントです。 本イベントではニフティ社員が業務を通じて学んだことを発信しています。 第

Next.js + Vercel + Supabase を用いた高速アプリ開発

こんにちは! ラク ス入社1年目の koki _matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダ は以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabase

SWCとRelease Pleaseで始めるReact TypeScriptライブラリ開発と公開

こんにちは。Pay ID Devの大木 ( @roothybrid7 )です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、 SWC(Speedy Web Compiler) や Release Please を利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント 「BASE Tech Talk #1

SvelteKit + Svelte を1年間くらい使ってみた知見など

前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(

フロントエンド未経験のSREエンジニアが挑んだ技術選定のリアル体験

こんにちは!株式会社 ラク スの@kzak_24と申します。 インフラ開発部 SRE課に所属しております。 さて今回は、 現在 アサイ ンされている新規システムの開発プロジェクトにて、フロントエンドの技術選定を担当した時の経験 をまとめようと思います。 フロントエンドは未経験だった為、色々と試行錯誤を行いました。 未経験なりにどのような基準を設けて技術選定を行

8/23(火)19:00〜 NIFTY Tech Talk #4 レガシーシステムからの脱却を開催いたします!

イベント概要 NIFTY Tech Talkは、ニフティ株式会社の社員が主催するトークイベントです。 本イベントではニフティ社員が業務を通じて学んだことを発信しています! 第4回目のテーマは「レガシーシステムからの脱却」。現在、ニフティではさまざまなシステムの刷新やリプレースなどを行っています。今までのレガシーなシステムからモダンなシステムにどんどん切り替

newrelic/nextを使ってNext.jsプロジェクトにNew Relicを導入する

こんにちは。AlphaDrive フロントエンドエンジニアの aku11i です。 Next.js で開発中のプロジェクトに New Relic APM / Browser を導入しました。 実は前にも対応したことがあったのでこれで2度目ですが、改めて調べ直したところ @newrelic/next というパッケージが新しく公開されていました。 Node.js エージェントをそのまま使う方法に比べて確認できる情報が増えるなどメリットがあり

Next.js とReact Query でデータを表示したり更新する

こんにちは。intdash グループ フロントエンドエンジニアの佐藤です。 Next.js を使った管理画面を作成するプロジェクトを担当する機会がありました。 管理画面は「 頻繁にデータが更新されることがない 」、「 同時アクセスはあまり起きない 」という前提の元に作成することが多いと考えています。 なのでサーバー、表示ともにパフォーマンス的に無駄なリクエストを
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?