一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
米Metaは7月3日（現地時間）、Twitterの競合とうわさされていた新サービス「Threads」のiOSアプリの“予約注文”ページを米AppleのApp Storeで公開した。日本語もサポートする。リリース予定日は6日となっている。 概要説明では「Instagramのテキストベースの会話アプリ」と定義されており、「Threadsは、コミュニティが集い、関心のあるトピックから次に来るトレンドまで何でも話し合える場です。興味・関心のジャンルが何であれ、お気に入りのクリエイターや自分と同じ興味・関心を持つ人をフォローし直接つながることができます。あるいは、自分の熱心なファンを増やし、世界に向けて自分のアイデアや意見、クリエイティビティを発信することができます」とある。 このアプリについては6月9日に米The VergeがMetaの全社会議の録音に基づいて報じた。その後、このうわさをきっかけに
2023-08-02 What's "Next" JS Meetup
Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~
最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記載あったらFB頂けたら幸いです） React 誕生までの Web iPhone と Ajax がリードした Web 2.0 時代 Webにおいて Ajax という技術が注目され始める 2005~ Google mapsやGmailといったサービスがリード jQueryの誕生が 2006~ iPhone登場 2007~ スマホアプリの登場によりソフトウェアのUXに求められる質的変化 mobile safariが時代のリードをした Flash
PHPで学ぶ Session の基本と応用 / web-app-session-101-2024
PHPカンファレンス関西2024 の登壇資料です。 Cookie を使った Session 管理について解説しています。
カリフォルニア州クパティーノ 欧州委員会は本日、App Storeがデジタル音楽市場における競争の障壁となっていると主張する決定を発表しました。この決定は、委員会が消費者被害の信頼できる証拠を明らかにできないにもかかわらず下されたもので、活況を呈し、競争が激しく、急速に成長している市場の現実を無視しています。
Create React Appは役割を終えました
長らくReactの入門キットとして使われてきたCreact React App（CRA） 2023年春に正式版になった新しいReactの公式ドキュメントでは、選択肢として紹介されていません。 標準から外れたとは言え、まだ一定の役割は担えるのだろうかと思い様子を見てみました。 とりあえず試してみる まずは現状確認のために実際にプロジェクトを作ってみます。 $ npx create-react-app cra --template typescript Creating a new React app in /Users/nekoya/src/github.com/nekoya/ggg/cra. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scr
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
2023/09/23に開催されたServerlessDays Tokyo 2023で登壇した資料です
iPhoneでファミコンからGB・64・DSまで遊べるエミュレータ「Delta」App Storeで無料配信。その場セーブや各種コントローラも対応 | テクノエッジ TechnoEdge
著書に『宇宙世紀の政治経済学』（宝島社）、『ガンダムと日本人』（文春新書）、『教養としてのゲーム史』（ちくま新書）、『PS3はなぜ失敗したのか』（晋遊舎）、共著に『超クソゲー2』『超アーケード』『超ファミコン』『PCエンジン大全』（以上、太田出版）、『ゲーム制作 現場の新戦略 企画と運営のノウハウ』(MdN)など。
Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応
JSConf JP 2023
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
App Routerについて色々調べたので、「Page Routerからどう変わったか？」を中心にいろいろ書きます。 ※Next.jsのバージョンは13.4です 🤗Page Routerから変わった点 「これだけ抑えておけばOK」な内容についてザックリ書きます。 特別な意味を持つファイルができた Page Routerではpages直下につくったファイルがすべてルーティングされました。 ですがApp Routerでは、app直下のpage.tsxと書かれたファイルだけがルーティングの対象になります。 ほかにも、layout.tsxと書かれたファイルを置いておくと「layout.tsxでpage.tsxを自動的にラップする」ができたりします👇
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
セキュリティチームの ぐっちー です。今回のブログでは Azure OpenAI Service と Azure Web App Service を使って企業専用ChatGPTを爆速で構築する方法が登場したのでご紹介します。技術的な難易度で見ると、めちゃくちゃ簡単で、記事にするか迷いましたが、ここまで簡単になった感動を伝えるために書きました笑 前提条件 今回の手順にはパブリックプレビュー中の機能が含まれます。 以下の状態を前提としています。 Azure OpenAI Serviceはセットアップ（MS社への利用申請・リソースのデプロイ）済みであること。 Azure OpenAI Service、Azure Web Appsを操作する権限が割当たっている事。 本ブログの内容は、2023年6月20日時点までの情報を元に作成しておりますが、クラウドサービスの仕様変更等に伴い、将来的に状況が変化す
Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
まとめ 黒岩草津町長の「性犯罪」虚偽告発の経緯①（2020～2021） 草津町長が町長室で新井町議（当時）に対し性犯罪をしたという告発がなさました。 町議のリコールを受けて、ネット上では草津町長・草津町に対するネットリンチというべき盛り上がりを見せましたが、吉峯（弁護士）が告発は虚偽だと考えてその旨を公言した経緯です。 なお、最初の2020年の頃は、私は草津町とは何のコンタクトもありませんでしたが、その後、若干の法律相談を受けているので、利害関係がない立場ではありません。 81984 pv 930 154 users 7
ソニーにおける App Runner 導入事例と生の体験談の紹介 / Case study and real experience of using App Runner in Sony products
３年ほど前に登場した比較的新しいサービスであるApp Runnerを商用環境で導入した事例を紹介します。 インフラの運用の手間を軽量化できる一方で、利用して初めて気づく課題もありました。 本日は実際の導入事例に基づいて、ECS Fargateとの比較、CI/CD・監視の工夫から障害発生時の運用方法といった生の体験を紹介することで、これから導入を考えている方へ向けて、技術選定のポイントとなる"肌感"を共有できればと思います。 登壇アーカイブ：https://www.youtube.com/watch?v=YiE3n06tfCA
Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想 仕
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
https://findy.connpass.com/event/306714/
はじめに この記事はAuth.jsがどのようなものか，どのように実装すればいいかなどをドキュメントを要約しながら紹介するものです． 2024/02/19 追記 Auth.jsはv5で破壊的変更がありました．新たにAuth.jsを学ぶ場合には，特に理由がない限りv5を使うことをお勧めします． Auth.jsはドキュメント整備中です．現在のドキュメントとは内容が異なる場合があります．この記事では旧ドキュメントの内容も交えて解説しています． 今回はNext.js App Router実装編です．前回の記事はこちら 環境構築 JWTを用いたOAuth認証を行うためのNext.js環境を構築します．面倒であれば以下にテンプレートを用意しましたのでご自由にお使いください． まず，Next.jsを作成します．以下のコマンドを実行し，質問に答えながら構築します． √ What is your projec
Mac App StoreのようにGUIでHomebrew Caskアプリのインストールや管理が行えるMacアプリ「Applite」がリリース。
Mac App StoreのようにGUIでHomebrew Caskアプリのインストールや管理ができるMacアプリ「Applite」がリリースされています。詳細は以下から。 Mac App Store以外で配信されている、いわゆる野良アプリをインストール/管理するのにMac用パッケージマネージャーHomebrew Caskを利用する場合がありますが、このHomebrew CaskをGUIベースで利用できる「Applite」が新たにリリースされています。 Make managing third party applications a breeze with Applite Download, update and uninstall your Mac apps with a single click. Applite – Aerolite Studios Appliteを開発＆公開したのは
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 Base path の設定あり App Router と Pages Router が共存している Base Path について Base Path の設定は next.config.js に以下のような記載があると、 module.exports = { basePath: '/base', } /pages/examples.tsx で配置したページコンポーネントが、 URL /base/examples で閲覧できるようになるものです。 また以下のような Link コンポーネントは、自動的に Ne
アップル、App Storeでレトロゲーム機エミュレータを解禁。ゲームの追加ダウンロードも可、合法に限る | テクノエッジ TechnoEdge
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 アップルが、App Storeのアプリレビューガイドラインを更新し、これまで許可しいなかったレトロゲーム機のエミュレーターアプリの配信を認める文言を追加しました。 ガイドラインには「レトロゲーム機のエミュレーターアプリはゲームのダウンロードを提供してよい」と記されており、適宜希望のタイトルを追加でダウンロードする仕組みも提供できることになります。 ただし、エミュレーターは許可するものの、当然ながら海賊版ゲームの配信まで許可されるわけではありません。ガイドライン文書では、エミュレーターを提供する開発者は「配信するゲームタイトルについてガイドラインおよび適用されるすべての法律に準拠していることを確認」し「アプリ内
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/
Next.js App Router で Keycloak と @auth0/nextjs-auth0 を利用してマルチテナント認証機能を実装する - Uzabase for Engineers
初めまして、 @takano-hi です。 2023年2月に AlphaDrive にジョインして、主にフロントエンド領域を中心に設計・実装などの業務を担当しています。 最近、Next.js のプロジェクトを新たに立ち上げる機会があり、せっかくなので App Router を採用しました。 そのプロジェクトの認証機能の実装に当たり、今まで他プロジェクトでも利用していた Keycloak と @auth0/nextjs-auth0 の組み合わせを試したところいくつかの困難に遭遇したので、その解決方法についてまとめようと思います。 環境 next v13.4.9 @auth0/nextjs-auth0 v3.1.0 keycloak v20.0.1 ライブラリの選定背景 私が所属しているチームでは、認証基盤（IDプロバイダー）に Keycloak を利用しています。 Keycloak は Op
Next.jsの新常識「App Router」を学ぼう！
Next.jsは、ルーティングとサーバー処理を高度に協調させるためのフレームワークとして、デファクトスタンダードの地位を確かなものにしています。2023年5月5日に公開されたNext.js 13.4において、フレームワークの根幹であるルーティング機構を刷新する新機能が追加されましたので、今後のNext.jsはどんな世界観で扱えばいいのかを解説していきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.4 Node.js 20.2.0／npm 9.6.6 React 18.2.0 Next.js 13.4.4 より直感的なルーティング、よりサーバーを活用したレンダリング Next.jsは、ReactでWebサイトやWebアプリケ
Apple、iOS 17.4ではSafari初回起動時に他社製ブラウザ選択肢を提示。App Store以外の配布経路も許容、ただしEU圏内に限る | テクノエッジ TechnoEdge
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 アップルは、EU圏内のユーザーを対象に、iOS と Safari ブラウザ、App Storeの挙動を変更することを発表しました。 25日にベータ版の提供が始まったiOS 17.4より、最初にSafariを起動した際、サードパーティ製のブラウザアプリにデフォルトブラウザを切り替えられることを案内するようになります。 サードパーティ製のブラウザアプリと言えば、ChromeやFirefox、Edgeが知られていますが、他にもBrave、Opera、DuckDuckGoなどがこれに該当します。 これらサードパーティ製のブラウザをデフォルトとして設定すれば、メッセージ、電子メール、メモなどに含まれるURLリンクをタッ
SoundFlowerやBlackHoleのようにMac上のアプリや接続されたデバイスからの音声を録音/配信できるオーディオキャプチャアプリ「Dipper v1.0」がMac App Storeでリリース。
SoundFlowerやBlackHoleのようにMac上のアプリや接続されたサウンドデバイスからの音声を録音/配信できるオーディオキャプチャアプリ「Dipper v1.0」がMac App Storeでリリースされています。詳細は以下から。 Macに仮想オーディオデバイスを作成し、アプリやマイク入力(ソース)などの音声を録音/配信できるオーティオユーティリティ「BlackHole」を開発しているカナダExistential Audio Inc.のDevin Rothさんは現地時間2023年08月14日、Beta版を公開し開発を続けていた新しいオーディオキャプチャアプリ「Dipper」を新たにMac App Storeでリリースしたと発表しています。 Introducing Dipper, the ultimate audio capture companion for your Mac.
Next.js App Router
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Meta、Twitter競合の「Threads」の“予約注文”ページをApp Storeで公開
エクスプローラー代替アプリ「Files」v3.3 ～サムネイルの表示速度が大幅に向上／レイアウトピッカーも再設計、「Windows App SDK 1.5」ベースに
App Router時代のデータ取得アーキテクチャ
今年のiPhone人気アプリは？ アップル「App Store」年間DLランキング発表
App Store、Spotify、そして欧州の活気あるデジタル音楽市場
「フォト」アプリが爆速に ～MicrosoftがUWP→Windows App SDK移行の苦労を解説／移行の技術的ハードルは高いが、確かなメリット
Next.js App Router での MPA フロントエンド刷新
実践Next.js - App Router への理解を深めるために -
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
ざっくりApp Router入門【Next.js】
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
企業専用 ChatGPT を Azure OpenAI & Web App で爆速構築する
黒岩草津町長の「性犯罪」虚偽告発⑦：APP研と北原みのりが主導したキャンペーンを振り返る
Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site
【Next.js】実務でapp routerに移行した所感
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
App Router移行時に0.01%の確率でCSR遷移が404エラーになる - とろろこんぶろぐ
Microsoft、新しいOSセキュリティ技術「Win32 app isolation」を発表／万が一ゼロデイ脆弱性をついた攻撃をうけても、影響を最小限にとどめる隔離機構
X、テレビ用アプリ「X TV App」を近日公開へ
控えめな App Router と持続可能な開発 - PWA Night vol.59
Next.js App Router Training