Next.js 13.2まとめ
基本的には以下のNext.js 13.2のブログを翻訳してまとめたものになります。 TL;DR ビルトインSEOサポート: 静的、動的にmetaタグを設定するための新しいMetadata API ルートハンドラー: WebのRequestとResponseに基づくカスタムリクエストハンドラー MDXのサーバーコンポーネント対応: マークダウン内部でサーバーサイドのみで動くReactコンポーネントを使用 Rust製MDXパーサー: 全く新しいRust製プラグインによるマークダウンパースの高速化 エラーオーバーレイの改善: 可読性を改善するためにNext.jsとReactのスタックトレースを分離 静的に型付けされたリンク(ベータ): next/linkとTypeScriptによる壊れたリンクの防止 Turbopackのいくつかの改善(アルファ): Webpackローダーとの互換性とサポートを改
Next.js の状態管理 2020
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
Next.js + Vercel + swr + TypeScript (No Redux + No SSR) で短期間チーム開発した - またのきかいに
はじめに タイトルにある通り Next.js + Vercel + swr + TypeScript という構成で短期間チーム開発をした。 以下のように特殊な状況なので色々試してみた。 開発状況 約3週間の短期間開発。 世間にリリースしない。プロトタイプを作って終了。メンテナンスもしない。 フロントエンドを触るのは自分を含めて3人。 自分・フロントの経験もあるバックエンドエンジニア・フロントエンドの経験が浅いエンジニアの3人。 ログイン機能有りのSNS的なもの。既に世の中に存在するプロダクトと似てる。 それぞれ選定理由と使用感を雑に書いていく。 Next.js github.com 環境構築が楽 Node.js環境さえ整えてもらえればすぐ動く。 ライブラリが最小限で済む Create React Appも環境構築が楽だが使われているライブラリのドキュメントを探すのが初学者には少しハードルが
Real World GraphQL on Next.js SSR
tl;drNext.jsはv9.3.0以降Initial Loadingの扱いが変わったクライアント側ではApolloを利用することができるが、Authorization Headerを設定するなら一工夫必要SSR時にはfetchによるシンプルなAPIリクエストをすると良い昨今のWebフロントエンド昨今のWeb開発において、React、TypeScriptとかのベース知識は当然として、やはりNext.js(あるいはNuxt.js)のような、SPA/SSR両方のニーズを汲み取りながら、dynamic routingを提供してくれたり、ビルド環境を高速に整備してくれるフレームワークが重宝されるようになってきていると感じます。 また、Reduxもアリですが、スキーマ駆動開発が推進できるGraphQL、特に尋常じゃなくステート管理が用意になるHooksとApolloクライアントの組み合わせは、フロ
Next.js : 本番運用における Tips of next.config.js
例えばな next.config.jsこんにちは。この記事は Next.js Advent Calendar 2019 1日目の記事です。Next.js のアドカレやりたかったので勢いで作って、直接お会いしたことがない方で、この人は Next.js 使ってそうだ！という方に Qiita アドカレから招待を送っていました。エントリーいただいた皆さまありがとうございます。 ご存知ない方のために Next.js とは？という話をしますが、フロントサーバでの SSR を完備した React Framework です。デフォルトで AMP 対応が出来たり、TypeScript での実践にフレンドリーだったり、スタティックなエクスポートだったりも可能です。 ZEIT CEO @rauchg が Chrome Dev Summit 2019 のキーノートに登壇したりしていました（JSConf.jp でも
Next.js 9からTypeScriptの利用方法が変わるのでまとめてみた - mottox2 blog
ZEIT社が開発しているReact製のフレームワークNext.jsですが、現在v.8.1.1のカナリー版がリリースされています。 v.9では様々な変更が入っていますが、個人的に注目しているのはTypeScriptが標準で利用可能になった点です。そこで備忘録を兼ねて型の書き方を整理してみました。 カナリー版の段階で書いた記事を更新しました。 > Next.js 8からの変更点Next.js 8からの変更点 TypeScriptを利用するためにwebpackの設定を行う@zeit/next-typescript パッケージが不要になりました。 このパッケージはnext.config.js内で利用しwebpackとbabelの設定を弄る役割を担っていました。内部にビルドインになりました。 型定義は@types/nextのものを使っていましたが、next.jsの本体側で型定義を持つようになりました
サーバーサイドの人にも伝えたいJAM Stackと静的サイトのイマ - mottox2 blog
aircloset社で行われたWeb界隈LT会で話した「サーバーサイドの人にも伝えたいJAM Stackと静的サイトのイマ」です。 > 静的サイトと動的サイト静的サイトと動的サイト > 静的サイト静的サイト 早くて、落ちないし、セキュリティで心配することも少ないけど、自由度低いよね。 > 動的サイト動的サイト 運用面倒。スケーラビリティ的に不利 攻撃される。 速度的に不利。 > 静的サイトジェネレータ静的サイトジェネレータ 動的に静的サイトを生成するジェネレータ 基本的にGitHubのpushと連動してビルドするような感じ > 時代は変わっている時代は変わっている monolithic services => micro services FTP => GitHub中心の開発環境の変化 PC => スマホシフト > GitHubを中心とした開発者の環境の変化GitHubを中心とした開発者の
Next.js を Firebase hosting で動かしてSSRする - Qiita
いわゆるサーバーレス。 TL;DR すべてのリクエストを Firebase Functions に流して next.js に食わせた結果を返すとSSRになる。最高。 概要 Firebase Hosting は index.html を上げたら動いてくれる静的サイトホスティングだと思っていたが、 全てのルーティングを Firebase functions に全て受けさせる。こともできた GCP知らない人向けに 一応解説しておくと Firebase Function = Google Cloud Function ≒ AWS Lambda そんでもって、React で SSR したいとき、スクラッチでもいいけど、一番簡単なのは next.js。next.js 公式にも exmaples があり、読んでみたら勉強になったので解説してみる。 Firebase Hosting の設定 { "func
next.js は Real World で使えるのか | nabeliwonote
最近はいろんなところで React アプリケーション(もちろん React とは限らないが)での SSR について語られることが多くなっていると感じる。 僕も個人の趣味プロダクトで Express サーバーで React コンポーネントをレンダリングするみたいなのをやったことがある。 で、その感想としてはとにかくめんどくさい。 SSR したい目的って SEO だったり OGP だったりみたいなクローラーに対しての表示か、もしくは初期表示の高速化の2つくらいだと思うんだけど、その目的に対する解答として SSR の自前実装はコスパ良いのかって考えるとなんとも微妙なところ。 特にネックなのが react-router で、バージョンが上がるたびに破壊的な変更が入ってアプリケーションが壊れるわけだけれど、その対応がクライアントのルーティングだけじゃなくて SSR の部分でもやんなきゃいけないのがと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
