「Next.js」に関連する技術ブログ
企業やコミュニティが発信する「Next.js」に関連する技術ブログの一覧です。
全214件中 121 - 135件目
Next.jsのローカルとGitHub Actionsで Daggerを実行してみた
2022/11/07
ブックマーク
こんにちは。X イノベーション 本部ソフトウェアデザインセンターの陳です。 CI推進活動の一環として、話題のCI/CDツールDaggerを使ってみました。 この記事では、DaggerでNext.jsプロジェクトのCIを構築して、ローカルと GitHub Actionsで実行する方法について紹介します。 Daggerについて みなさんはどのCI/CDツールを使っていますか？私が所属する部署では GitHub Actionsを使うこと
Next.js 13 の Turbopack をカスタムサーバーで試そうとした話
2022/10/27
ブックマーク
経緯 Next.js Conf 2022 でNext.js 13に関する発表、その中には Turbopack なる大変アツい代物がありました。 Next.js 13 Blog から 700倍だと？？ これは試してみたいですね。 TL;DR 2022/10/27 現在、v13.0.0 ではカスタムサーバー(Custom Server)向けに Turbopack を使う方法はありません。 バージョンアップを待ちましょう。 試してみる ブログでは優位性について記述があるものの、実際の手順は
Next.js + TypeScript + Docker + GitHub Actions の環境構築
2022/10/27
ブックマーク
こんにちは。X イノベーション 本部ソフトウェアデザインセンターの陳です。 この記事では Next.js + TypeScript + Docker + GitHub Actionsの環境構築の方法をまとめます。 セットアップ手順 以下のセットアップを行います。 1. create-next-appでNext.jsのプロジェクトを作成 2. 静的分析ツールESLintの設定 3. コードフォーマッターPrettierの設定 4. テスト フレームワーク のJest、React Testing Lib
Next.js + TypeScript + Docker + GitHub Actions の環境構築
2022/10/27
ブックマーク
こんにちは。X イノベーション 本部ソフトウェアデザインセンターの陳です。 この記事では Next.js + TypeScript + Docker + GitHub Actionsの環境構築の方法をまとめます。 セットアップ手順 以下のセットアップを行います。 1. create-next-appでNext.jsのプロジェクトを作成 2. 静的分析ツールESLintの設定 3. コードフォーマッターPrettierの設定 4. テスト フレームワーク のJest、React Testing Lib
Reactのフレームワーク”Next.js”を触ってみた「動的ルート / APIルート」
2022/10/19
ブックマーク
こんにちは、エンジニアのみーや（ @miiya387 ）です。 Reactのフレームワーク「Next.js」への入門として、公式チュートリアルを何回かに分けてまとめていきます。 今回は、5. Dynamic Routes と 6. API Routesについてまとめていきます。 それ以前の章を知りたい方は各章に過去記事のリンクを付けておりますのでそちらからご覧ください。 Create a Next.js App Navigate Between Pages Assets, Metad
Cloud Build上でNext.jsのコンテナイメージのビルド速度を改善した話
2022/10/18
ブックマーク
はじめに SREチームの磯村です。 去年入社してからフロントエンドエンジニアとして働いていましたが今年6月からはSREチームに転属しました。 SRE見習いとして奮闘中です。 コミューンはアプリケーションの基盤としてGoogle CloudのCloud Runを利用しています。 そしてCloud Runで実行するコンテナイメージをCloud Build上でビルドしています。 この記事ではCloud Build上でのコンテナ
Cloud Build上でNext.jsのコンテナイメージのビルド速度を改善した話
2022/10/18
ブックマーク
はじめに SREチームの磯村です。 去年入社してからフロントエンドエンジニアとして働いていましたが今年6月からはSREチームに転属しました。 SRE見習いとして奮闘中です。 コミューンはアプリケーションの基盤としてGoogle CloudのCloud Runを利用しています。 そしてCloud Runで実行するコンテナイメージをCloud Build上でビルドしています。 この記事ではCloud Build上でのコンテナ
Nextのstandalone機能のビルドサイズを通常ビルドと比較する
2022/09/30
ブックマーク
どうも、インターンの手塚です。今回は、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/09/30
ブックマーク
はじめに 初めまして、レバレジーズ株式会社の小林といいます。 私は2022年4月に開発未経験でエンジニアとして中途入社し、teratailというサービスのフロントエンド開発とマーケティング周りの業務に携わっています。 teratailでは、昨年末にリプレイスを行ったこともあり分析基盤がきちんと整備されておらず、各種分析ツール（Google Analytics4やBigQuery、Google Optimizeなど）
Rails+Next.jsでGraphQLを導入する時に考えたこと
2022/09/29
ブックマーク
こんにちは、タイミー開発プラットフォームチームで業務委託として働いている 宮城 です。 タイミーはリリースから4年が経過したプロダクトで、2022年の前半から一部領域でGraphQLを利用し始め現在導入を進めています。 本記事では、GraphQLをプロダクトに導入する上で判断に迷った箇所や課題に対して、タイミーでの意思決定とその理由を紹介します。参考にしていただ
NIFTY Tech Talk #4 レガシーシステムからの脱却に登壇しました！
2022/09/28
ブックマーク
はじめに こんにちは！新卒入社6年目の添野です。@niftyトップページシステムの開発・運用を担当しています。 先日「レガシーシステムからの脱却」に登壇しましたので、その様子を紹介していきます！ イベント概要 NIFTY Tech Talk は、ニフティ株式会社の社員が主催するトークイベントです。 本イベントではニフティ社員が業務を通じて学んだことを発信しています。 第
Next.js + Vercel + Supabase を用いた高速アプリ開発
2022/09/28
ブックマーク
こんにちは！ ラク ス入社１年目の 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ライブラリ開発と公開
2022/09/15
ブックマーク
こんにちは。Pay ID Devの大木 ( @roothybrid7 )です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、 SWC(Speedy Web Compiler) や Release Please を利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント 「BASE Tech Talk #1
SvelteKit + Svelte を1年間くらい使ってみた知見など
2022/09/06
ブックマーク
前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(
フロントエンド未経験のSREエンジニアが挑んだ技術選定のリアル体験
2022/08/18
ブックマーク
こんにちは！株式会社 ラク スの@kzak_24と申します。 インフラ開発部 SRE課に所属しております。 さて今回は、 現在 アサイ ンされている新規システムの開発プロジェクトにて、フロントエンドの技術選定を担当した時の経験 をまとめようと思います。 フロントエンドは未経験だった為、色々と試行錯誤を行いました。 未経験なりにどのような基準を設けて技術選定を行