Content-Length: 248903 | pFad | http://b.hatena.ne.jp/littlefield/next.js/
画像最適化の舞台裏をのぞき見👀してnext/imageを使いこなす
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 令和トラベルでは、海外旅行におけるあたらしい体験を目指す海外ツアー・ホテル予約アプリ「NEWT（ニュート）」を提供しています。NEWTではWebアプリを提供しており、Webアプリのパフォーマンスにおいて、画像は非常に重要な要素です。特に、ページの読み込み速度はカスタマー体験に直結するため、画像の最適化は欠かせません。Next.jsのImageコンポーネントは、画像最適化を容易にし、Webパフォーマンスを向上させる強力なツールです。 この記事では、next/imageのコア機能を3つのセクションに分けて解説し、Next.jsで画像最適化を行う方法を具体的に説明します🗺️ ※ この記事はVercel Meeetup #1で共有した内容を記事にしたものです。 next/imageの主要機能 React
React/Next.jsでの俺的ベストプラクティスを見てくれ
木瓜丸です。 最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか？！と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。 この記事で触れること この記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。 コンポーネントの管理の仕方などは特に着目しませんがご了承下さい。 hooksの導入 React初心者の方は最初に疑問に思うと思いますので、hooksについて触れておきます。 hooksというのは、Reactによって提供されているuseState, useEffectといったやつや、それらを組み合わせて作ったオレオレ状態管理基盤の総称です。 この記事で用いる基本的なhooksをいくつか紹介します。 useState その名の通り、状態を持つ変数を作ってくれます。 const Hoge = () => { c
React ユーザー向けの Next.js ガイド
最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。 つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材 とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、 ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか 元々は SSR のための煩雑な手続きをしなくてい
Next.js（TypeScript）でFirebaseを利用し、Googleログインを実装する
はじめに この記事では、Firebase Authenticationを使ってTypeScriptを使用したNextアプリにGoogleログインを実装する方法を記述します。 JavaScriptを使用したNextアプリにGoogleログインを実装する方法はこちらに記述しています。 この記事が他の人の参考になれば幸いです。 また、この記事の内容に間違った記載がありましたら、指摘してもらえるとありがたいです。 環境 名前 バージョン
Next.jsを使ってCloud FunctionsとFirebase HostingでSSRする - Qiita
Next.js 9を使ってCloud FunctionsとFirebase HostingでSSRする 皆さんこんにちは、noriです。 FirebaseSummitのレジストレーションがオープンしましたね。僕は今年も参加しますよ！! 今年はスペインの開催ですねー 楽しみ。 最近フロントの環境設定をする機会があったので、登場したばかりのNext.js 9をCloud Functionsにのせてみました。 Cloud Functionsにのせるところまでは、すぐだったんですがReactの扱いが初めてだった僕にとってつまりどころがあったので、同じことをしようとしている人たちのためにこの記事を書くことにしました。 先にサンプルコードを置いておきます。 Firebase HostingとしてNext.jsを動かす まず今回やったことを図として示します。 ポイントは以下の2つです。 Next.jsを
next.js は Real World で使えるのか | nabeliwonote
最近はいろんなところで React アプリケーション(もちろん React とは限らないが)での SSR について語られることが多くなっていると感じる。 僕も個人の趣味プロダクトで Express サーバーで React コンポーネントをレンダリングするみたいなのをやったことがある。 で、その感想としてはとにかくめんどくさい。 SSR したい目的って SEO だったり OGP だったりみたいなクローラーに対しての表示か、もしくは初期表示の高速化の2つくらいだと思うんだけど、その目的に対する解答として SSR の自前実装はコスパ良いのかって考えるとなんとも微妙なところ。 特にネックなのが react-router で、バージョンが上がるたびに破壊的な変更が入ってアプリケーションが壊れるわけだけれど、その対応がクライアントのルーティングだけじゃなくて SSR の部分でもやんなきゃいけないのがと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/littlefield/next.js/
Alternative Proxies:
コピペで始めるNext.js + Firebase Hosting 【静的サイト】 - Qiita
Next.js を Firebase hosting で動かしてSSRする - Qiita