Google App EngineへのNext.jsアプリケーションデプロイで気付いた課題と対策
はじめに 今回は、Google App Engine に Next.js アプリケーションをデプロイした際に遭遇した課題と、それぞれの対応について紹介します。 npx create-next-app コマンドの実行後にデプロイした際に、以下の課題に遭遇しました。 next/image を利用している画像へのリクエスト時に App Engine 上で書き込みエラーが発生する App Engine のイメージサイズが400MB弱程度と大きい App Engine のパフォーマンス改善のためのウォームアップリクエストの構成方法が分からない 1. next/image を利用している画像へのリクエスト時に App Engine 上で書き込みエラーが発生する next/image を利用することで、WebP 対応や画質の調整、画像のサイズに応じた配信など簡単に実現することができます。詳しくは、Nex
【保存版】「そのuseEffectの使い方あってる？」と言われる前に
参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }
Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える | stin's Blog
Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と
How to replicate the Zelda BOTW interface with React, Tailwind and Framer-motion: Part 1
Zelda BOTW starter Complete demo https://www.gameuionweb.com/zelda-botw Articles links: Part 1 Part 2 Part 3 Stack React Tailwind Framer-motion (beta) Useful links for Tailwind: Cheatsheet VS Auto completion plugin Intellij Auto completion plugin Credits Items Data: Zelda Gamepedia Font: Reddit user /75thTrombone The repository is set up with Typescript but no obligation here, you can use either t
Full stack open
You can discuss the course and related topics in our dedicated group on Discord https://study.cs.helsinki.fi/discord/join/fullstack and on Telegram: https://t.me/fullstackcourse. Please join the conversation! See here how to ask questions in a proper way Parts 0-8 and 13 of the course material is written by Matti Luukkainen. The content of part 9 is written by developers from Terveystalo. Part 10
React.js Tutorial: The Complete React Introduction
You can count on this guide to always be recent. We update it after every major change in React. It was last updated after the 17.0 release. Before you begin, please note that this is a beginner-friendly guide that covers the concepts I classify as fundamentals for working with React. It is not a complete guide to React but rather a complete introduction. At the end of this guide, I list a few nex
React + Redux + Comlink = Off-main-thread — surma.dev
Redux is state management. State management belongs off the main thread. React is a popular web framework.Some love React for its component abstraction, some because of its vast ecosystem and some for its meta-platform properties. Note: I use words like “popular” or “often” being very aware that I am under the influence of the Web Development Twitter Echo Chamber™️. Your mileage may vary, proceed
React Hooks での状態管理と副作用の表現 - mizchi's blog
React Hooks は Stateless Functional Component でも setState 的な状態操作や componentDidMount のような操作を可能にするための仕様提案です。 既に開発ブランチに入っていますが、 現時点で公式に採用されたものではないです。リリース時にはAPIが変わる可能性があります。 React のメイン開発者の一人である sebmarkbage の出してる RFC https://github.com/reactjs/rfcs/pull/68 試してみる react@16.7.0-alpha.0 に既に実装されており、公式のブログでも解説が出ています。 https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-reference.html 自分は以下
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/yoshiko_pg/status/1616449505565769737
【アーカイブ_20230120開催】Harajuku.ts Meetup 〜 Recoilの事例集めました〜
CodeSandbox SSE Discontinued
Building Accessible Switch/Toggle Buttons with Headless UI React and Tailwind CSS
React Labs: Series Launch
The React Cookbook: Advanced Recipes to Level Up Your Next App
Introduction :: Working with Data in React
What are Controlled Components in React
React のユーザーから見た今後のフロントエンドの予想
TechCrunch | Startup and Technology News
Next.js by Vercel - The React Framework
