Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に

2024/04/17 6 users React Vercel Turbopack ルーティング

Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に Vercelは同社が開発するWebアプリケーションフレームワークの最新版となる「Next.js 14.2」の正式リリースを発表しました。 Next.jsは、ReactをベースとしたオープンソースのWebアプリケーションフレームワークです。ルーティングやサ... 続きを読む

Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて

2024/03/28 12 users 実践 書評 ドキュメント 見本誌 2024-03-28

Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習... 続きを読む

[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする

2024/03/19 98 users ビルド Twitter 本番環境 開発環境 開発中

はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なので... 続きを読む

Next.jsのlayout.tsxで認証チェックすると情報漏洩するかも

2024/03/12 13 users layout.tsx 情報漏洩 ゲー 実装 肥大化

Next.jsの認証チェックどこでするか問題 基本的には middleware.ts で行うと思うのですが、肥大化を避けたり、ちょっとした共通処理は layout.tsx に書くこともあるでしょう。今回は layout.tsx で認証チェックをした場合に、実装によっては意図せず認証ユーザにしか表示したくない情報が漏洩してしまうかもしれないケー... 続きを読む

React Server Componentの実行順序とフレームワークでの注意点

2024/03/09 12 users フレームワーク 実行順序 RSC layout TSX

前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」というこ... 続きを読む

【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita

2024/03/08 28 users HTML クライアント サーバー リクエスト ＣＳＲ

Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることによ... 続きを読む

フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代

2024/03/07 135 users 変遷 フロントエンドパフォーマンス 時代

こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしていた記述を削除 ・レガシーMPA + Ajaxについて、初回表示に関する言及... 続きを読む

【30歳/完全未経験/独学】webアプリを作製しました【Golang, Next.js, MySQL, Docker, GitHub Actions CI, AWS Fargate on ECS】 - Qiita

2024/03/04 25 users Qiita Docker golang API figma

完成物 ER図 画面遷移図 figma, 原寸画像 AWS構成図 ※備考※ GitHub Actions CIは構築済みです。 GitHub Actions CD, apiのprivate subnet化にも取り組んでいます。 EC2インタンスは通常時停止です。 技術選定理由 プログラミング、IT業界ともに未経験で着手し独学で作りました。 Go 比較対象：JAVA、Ruby、Python等 コン... 続きを読む

Re: Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）

2024/03/05 7 users layout.tsx children 用途 整理 自身

自分も同じ道を辿ってきて今はちょっと考え方が変わっているので自身の整理がてらmeijinさんの記事に乗っからせていただきます🙏 Re: 「A layout is UI that is shared between routes.」って書いているのでめっちゃめちゃ違う用途じゃないか？ export default async function Layout({ children }: { children: ReactNo... 続きを読む

実践Next.js - App Router への理解を深めるために -

2024/02/28 28 users App Router 本稿 刊行 サンプルコード 書籍

Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています... 続きを読む

Server Actionsにユーザ操作されたくないデータは渡さない

2024/02/27 6 users Server Actions Hidden input タグ

Next.jsやServer Actionsに限らずWebアプリケーション一般的な話になりますが、機能開発する際に、ユーザに勝手に操作されたくないデータを <input> タグを通じて受け取ることは避けなければなりません。 例えば、極端な例ですがECサイトで商品の価格を <input type="hidden" name="price" value="500" /> と書いてあっ... 続きを読む

ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."

2024/02/26 229 users Reactアプリ ssig33 最小限 astro Remix

最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもS... 続きを読む

type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform

2024/02/18 5 users プログレッシブエンハンスメント React 標準 web 特徴

type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform 2024.02.18 Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Ac... 続きを読む

Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた

2024/02/17 6 users microCMS ヘッドレスCMS API プロセス 実装自体

技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記... 続きを読む

プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話

2024/02/14 21 users フルリプレイス App Router コンソール画面 ＣｉＵ

CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後 ・なぜNext.jsを使うのか ・古いNext.js製サービスをどのようにApp Router化したのか 以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお... 続きを読む

【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章 - Qiita

2024/02/14 5 users Qiita React TypeScript 例題 Java

概要 リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。 React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み... 続きを読む

TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】

2024/02/13 12 users Query Remix React ルーティング BtoB

Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサー... 続きを読む

個人ブログをNext.jsのSSGからHonoのSSGに移行した

2024/02/05 17 users github.com SSG hono 目的 機能

「Honoのv4が2月9日にリリースされます」という記事にてHono v4ではSSGモードがサポートされることになった。この機能を試す目的で今までNext.jsのSSGモードで構築していた個人ブログをHonoのSSG機能で書き換えた。 ブログ https://yuheinakasaka.github.io/gialog-diary/ リポジトリ https://github.com/YuheiNakasaka/... 続きを読む

Next.js + Hono + AWS でイベント駆動なプロフィール交換アプリを開発！

2024/02/02 10 users hono 瀬尾 AWS レスポンス tl;dr

TL;DR スマホでQRコードを読み込むプロフィール交換アプリを開発した。 イベントソーシングだったり Hono だったり、気になる技術を試せた。 アプリのレスポンスが速く、懇親会も盛り上がったのでよかった！ はじめに レバテック開発部で基盤システムグループに所属している瀬尾です。 普段はマイクロサービスのつらみを... 続きを読む

Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】

2024/01/30 376 users TypeScript Tailwind CSS 参考 説明

はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが... 続きを読む

Next.js App Router キャッシュの今

2024/01/26 10 users キャッシュ Next.js App Router RSC

先日Vercelから「Next.js App Router Caching: Explained!」というタイトルの動画が公開されていたので、その内容をまとめることでNext.jsのキャッシュの今について整理しておこうと思います。 基本 まずNext.jsでは、静的レンダリングがデフォルトです。RSCを使用していても基本的にはビルド時にページが事前レンダリン... 続きを読む

「エンジニアDB」というサービスを開発しました！【Next.js / Rails / AWS / Terraform / Docker / GitHub Actions】 - Qiita

2024/01/24 11 users Rails Qiita Docker Terraform

「エンジニアDB」というサービスを開発しました！【Next.js / Rails / AWS / Terraform / Docker / GitHub Actions】RailsAWSエンジニア個人開発Next.js はじめに こんにちは！ ひらぬま（@koocookooc）と申します。 今回、Happiness Chain の卒業課題として、 「エンジニアDB」という、『〇〇なエンジニアを検索できる... 続きを読む

App Router | Next.js 公式ドキュメント 日本語翻訳プロジェクト

2023/12/27 8 users App Router 公式ドキュメント アプリケーショ 断面

本ドキュメントは公式ドキュメントの v14.0.3 の断面を翻訳したものです。 公式ドキュメントのアップデートに追随して適宜更新しますが、最新情報が反映できていない可能性があります。 一部翻訳途中のページがありますが、随時翻訳を追加予定です。 Next.js の App Router は、React の最新機能を使ってアプリケーショ... 続きを読む

【2024年1月】Next.js での新規アプリの構成 & Next.js ディレクトリ構成(features)

2024/01/12 26 users Features Nex ディレクトリ構成 構成 選定

選定の方針 ログインしての利用がメインで、ユーザーがあまり多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリに集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 Next.js ライブラリ構成 メインで使っているライブラリです。Nex... 続きを読む

【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita

2024/01/10 128 users Qiita Prisma microCMS MaMi 皆さん

【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので... 続きを読む