You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Since its inception over 12(!) years ago, there's been a glaring animation-sized hole in React's API. Over the year its closest competitors like Vue and Svelte have introduced APIs that, while not extensive, still make animations a little easier. Whereas React developers have had to rely on third-party libraries like Motion for React, React Spring or others. Until now. Yes, React is getting its fi
Ryan Carniato for This is Learning Posted on Feb 27, 2023 • Updated on Mar 21, 2023 There has been some buzz recently in the frontend world around the term "Signals". In seemingly short order they seem to be everywhere showing up in everything from Preact to Angular. But they are not a new thing. Not even remotely if you consider you can trace roots back to research in the late 1960s. At its found
あけましておめでとうございます。もう2025年とは早いですね。まだ2024年くらいの気持ちです。不思議ですね。 年が明けてやりたいことといえば今年の目標を立てる、という方が多いかなと思います。僕はそういう人間ではないというか、目標を立てても三日坊主とは言わないまでも1ヶ月くらいで目標とはなんだったのか、となってしまうことが多いので、近年は目標は意識していません。 そんな僕でも今年は意識していきたいことが一つあります。それは「Next.jsでNEXT_PUBLIC_のプレフィクスをつけた環境変数は乱用しない」です。同じような目標を立ててる方もきっと多いことでしょう。ということでその話を書いておきます。あとここからは「ですます調」ではなくなります。 Next.jsの環境変数 このエントリではNext.js 15 + App Routerについて書いている。環境変数については、まあ基本はここに書
"use cache"は、Next.jsのDynamic IOで利用することができる新たなディレクティブです。本稿は筆者の備忘録を兼ねて、Dynamic IOの成り立ちや"use cache"の内部実装について解説するものです。 Dynamic IOの成り立ち Dynamic IOは2024年10月のNext Confで発表された、Next.jsにおける新しいコンセプトを実証するための実験的モードです。Dynamic IOはその名の通り、主に動的I/O処理に対する振る舞いを大きく変更するものです。 具体的には、以下の処理に対する振る舞いが変更されます。 データフェッチ: fetch()やDBアクセスなど Dynamic APIs: headers()やcookies()など Next.jsがラップするモジュール: Date、Math、Node.jsのcryptoモジュールなど 任意の非同期
2024/12/10に開催された3社合同フロントエンド合同勉強会で話した内容 https://prtimes.connpass.com/event/335335/
Framer Motion is now independent, introducing Motion First, some personal news: Next week will be my last at Framer. Writing that feels pretty wild. Making Framer Motion has been the best job of my life. To do so for six years within the best product team in the world, both a massive learning experience and a privilege. However, that leads to some news that I'm incredibly excited to share. With Fr
The simplest way to add CSS to React. No build configuration required. Inputimport { styled } from "restyle"; const Button = styled("button", { padding: "0.5rem 1rem", borderRadius: "4px", backgroundColor: "blue", color: "white", }); export default function Page() { return ( <Button css={{ paddingInline: "0.8rem", backgroundColor: "pink", }} => alert()} > Click me! </Button> ); } Outpu
こんにちは！プロダクトエンジニアのshiraです。 2024年6月にリリースした採用管理機能の開発をしています。 support.smarthr.jp 採用管理機能ではNext.jsのApp Routerを採用しています。SmartHRではこれまでApp Routerを使ったプロダクトがない状態だったので、技術選定時は採用するか迷いました。 この記事ではApp Routerを採用するまでの経緯と採用してみてどうだったかについて紹介させていただきます。 Pages RouterとApp Routerについて まずはじめにPages RouterとApp Routerについて軽く説明します。ご存知の方は読み飛ばしてください。 2024年9月現在、Next.jsのルーティングシステムは2つ用意されています。それがPages RouterとApp Routerです。 Pages RouterはNe
Server actions are here!Enjoy full support for React 19’s server actions API. While Waku already had limited support for server actions, today’s v0.21 release brings full support for the React server actions API. This includes inline server actions created in server components, server actions imported from separate files, and the invocation of server actions via <form> element action props. Server
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R
デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstableとしてリリースされ、App Routerが登場しました。 ツリー構造でのファイル配置が基本となりました。 ディレクトリ構成とルーティング page単位・feature(機能)ごとに切り分けたディレクトリ構成が可能になったため、より直感的で再利用性の高い構造が実現しました。 // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ └
土日でreact-railsとturbolinksを勉強してみた成果です やりたいこと 画面遷移するときは<div id='content'></div> の中身だけ入れ替えて、pushStateで行き来できるようにしたい reactを使ったリッチなページでも、イニシャルロードやSEOの為にサーバーサイドでレンダリングしておきたい サーバーサイドレンダリングした要素を破棄することなくReactで初期化してsetStateでガンガンViewを書き換えたい 結果どうなったか サーバーサイドでReactComponentをレンダリングしてクライアントのReact.renderで初期化情報を揃えて引き継ぎ どんな画面でもapp.component.setState({})が反映されて最高 TurbolinksでReactComponentをマウントしたルート要素だけ入れ替え その為にTurboli
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く