Hatena Blog Tags
はてなブログ トップ
App Router
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

App Router

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Tech Creator Hub•4ヶ月前

【2025年最新】Next.js 15入門｜App Routerで始めるモダンReact

Next.js 15の新機能 プロジェクト作成 App Router の基礎 ファイルベースルーティング ページコンポーネント Hello, Next.js 15! レイアウト Server Components Client Components API Routes まとめ 関連記事 より詳しい情報はこちら（WordPress） 「Reactは分かるけどNext.jsは何が違うの？」と疑問に思っていませんか？Next.js 15はReactのフレームワークで、ルーティング、SSR、APIルートなどを統合しています。 Next.js 15の新機能 機能説明Turbopack高速ビルド（Web…

#AI開発#プログラミング#TypeScript#2025年版#2025年最新Next.js#15入門｜App#Routerで始めるモダンReact#Next.js#App Router

関連ブログ

FURYU Tech Blog - フリュー株式会社•7ヶ月前

Next.js（App Router）リポジトリのディレクトリ構成を見直した話

こんにちは。ピクトリンク開発部 サイトチーム に所属しています松本です🐹 ピクトリンクのフロントエンド開発を主に担当しています。今回はフロントエンドの改善活動に関する記事を書きました✍️ はじめに🗣️ 解消したい課題📝 リファクタ実施に向けた計画と変更内容💪 変えたぞー！🎊 悩んだところ🤔 〜やっぱりfeatureディレクトリって良いの？〜 余談とまとめ🌱 はじめに🗣️ 運用中のNext.js（App Router）のリポジトリにおいて、ふとしたときに「ちょっとファイル探しにくすぎんか」と感じることがありました。 目的のファイルがどこにあるのか直感的に分からず検索頼みになることが多い状態になっ…

#App Router#ディレクトリ構成#リファクタリング
TECHSCORE BLOG•8ヶ月前

Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（Server Actionsとフォーム処理編）

1. はじめに 1.1 第3回の位置づけ 第1回では Server Components と Client Components の基本概念を学び、第2回ではルーティングとレイアウトの仕組みを理解しました。今回の第3回では、これらの知識を活かして、Server Actions による新しいフォーム処理手法を習得し、実際の Web アプリケーション開発で必要となる認証・セッション管理まで踏み込んでいきます。 これにより、App Router を使った完全な Web アプリケーション開発のための基盤が完成します。 過去の記事は以下からご覧いただけます。 Next.js App Router の基礎…

#Next.js#Server Actions#フォーム処理#App Router
TECHSCORE BLOG•10ヶ月前

Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（概念とディレクトリ構造編）

1. はじめに 1.1 App Router とは何か Next.js 13.4 で正式リリースされた App Router は、従来の Pages Router に代わる新しいルーティングシステムです。最も重要な特徴は、React Server Components をデフォルトで採用している点にあります。これにより、サーバーサイドでコンポーネントをレンダリングし、必要な部分のみをクライアントに送信することで、パフォーマンスの大幅な向上を実現しています。 App Router は単なるファイル構成の変更ではありません。React 18 の新機能を最大限活用し、サーバーとクライアントの境界をよ…

#Next.js#App Router#フロントエンド#Web開発
KENTEM TechBlog•1年前

【App Router】Next.jsでページの離脱防止を実装する

こんにちは。フロントエンド開発を担当している Y.O. です。 現在開発中のプロダクトでは、Next.js（App Router） を採用しています。 開発を進める中で、フォームやデータを編集中にページを離脱しようとした際、警告を表示する処理を実装する必要がありました。 いわゆる「入力内容が消えますがよろしいですか？」のようなやつですね。 こんなの もし入力中の内容が、ユーザーの意図しない操作でクリアされてしまったら、「もういいや」と、そのままタブを閉じられてしまうかもしれません。 この離脱防止の処理、Pages Router 時代にはrouter.eventsを使って比較的簡単に実装できたの…

#Webフロントエンド#Next.js#App Router
TechDoctor開発者Blog•2年前

Next.js（App router）における開発しやすいディレクトリ構成の例

初めまして、テックドクターでフロントエンド開発を担当している大瀧です。ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerの…

#Next.js#フロントエンド#フロントエンド開発#ディレクトリ構成
Leverages Tech Blog•2年前

【Frontend Night: App Router本番運用企業が語る！Next.js新機能活用法】で発表しました

レバレジーズ株式会社 レバテック開発部の堀内です。 2024/05/29に、PharmaX社、ANDPAD社、弊社の3社による共催イベント「Frontend Night: App Router本番運用企業が語る！Next.js新機能活用法」が開催されました。 Next.jsのApp Routerを実際に本番運用している会社が集まり、App Routerを利用した開発において良かったことや工夫したことを発表しました。 私は『App Routerの開発で気をつけたいこと3選』というテーマで発表しましたので、そのスライドを共有します。 App Routerを利用したプロジェクトを通して、ハマったとこ…

#Next.js#App Router#フロントエンド
every Tech Blog•2年前

Hygen で加速する Next.js App Router 開発

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

#NextJs#App Router#Hygen#フロントエンド開発
every Tech Blog•3年前

Next.jsのPages RouterからApp Routerへの移行に挑戦してみた

初めまして，トモニテ開発部でSoftware Engineer(SE)をしている鈴木です． SEチームはAPI開発からそのAPIを利用したweb開発まで幅広い領域を担当しており，トモニテ開発部のweb開発には Next.js を採用しています． また，エブリーの開発部では定期的に挑戦week(※)なるものを開催し，技術的観点から事業貢献を行う1週間を設けており，その中でNext.jsのPages RouterをApp Routerに移行する機会を頂けたので紹介させていただきます． ※ 挑戦weekについては以下のオウンドメディアで記事にしています．今回の挑戦weekは事業部の垣根を超えたチーム…

#Next.js#Next.js13#App Router#Pages Router#移行#v13