Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
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 で動かし
You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
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
Next.js App Router で route 毎に Cache-Control を任意に指定したいときは middleware を使う（今のところ）
App Router でトラディショナルな動的 SSR 既存〜今後のコンポーネントの互換性を踏まえて React を前提とし、フレームワークの分散を抑制するため Next.js を選び、多少の冒険ではあったが App Router での開発にトライしています。 今後は現在 Ruby on Rails のモノリシックコードベースで展開されている複数プロダクトを分割し、それぞれを Next.js で水平展開し直していくイメージです。 で、まずは App Router のフルパワー（サバクラに渡る重厚なキャッシュ機構）を要しない、ログインする操作こそあれだページの9割9分が Server Components としてレンダリング可能な領域をリプレース中。 つまり // app/layout.js export const fetchCache = 'default-no-store'; expo
【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ
こんにちは！PR TIMES 開発本部フロントエンドエンジニアの岩元 (@yoiwamoto) です。 先日、月間9000万 PV のプレスリリース配信サイト PR TIMES で、もっともアクセスが多い「プレスリリースページ」の実装を、PHP + Smarty + jQuery から Next.js に移行しました。 今回はこれについての詳細や難しかったことなどを共有します。 背景と目的 PR TIMES の Web アプリケーションのフロントエンドは、この数年、必要な部分から随時ページ単位で React 実装へのリプレイスが進んでいる状態で、まだ多くのページでバックエンド生成の HTML + jQuery の実装が残っています。 ご利用企業様のプレスリリースを掲載するプレスリリースページ（下スクリーンショット）もその一つで、機能追加や改修のニーズはありながら、大きな変更を行うことが難し
フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog
※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました
なぜ Server Actions を使うのか
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。 特に <button> の formAction 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。"use server;" の部分を PHP やバイナリに置き換えると行った多くのミームも生まれました。 function Bookmark({ slug }) { return ( <button formAction={async () => { "use server"; await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`; }} > <BookmarkIcon> </button> ) } X 上での反応を見ると、このクライントから直接 SQL クエリを実行するコードは見た目の印象
React Server Components と GraphQL のアナロジー
Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う（何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので）。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入
一休レストランで 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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React does not recognize the `fetchPriority` prop on a DOM element. · Issue #65161 · vercel/next.js
Crash when navigating back to a page using the browser's back button, after the page has been revalidated · Issue #61336 · vercel/next.js
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
Next.js App Router での MPA フロントエンド刷新
Standalone export Sharp executable is not present with pnpm · Issue #59346 · vercel/next.js
fix: add special case for sharp@0.33.0 optional dependencies by styfle · Pull Request #372 · vercel/nft
Vercel only: 0.33.0: error Could not load the "sharp" module using the linux-x64 runtime · Issue #3870 · lovell/sharp
`@vercel/nft` does not pick up platform-specific binaries for `sharp` · Issue #371 · vercel/nft
Sharp 0.33 does not create binaries for alpine linux / docker · Issue #3900 · lovell/sharp