タグ

reactとnextに関するlilpacyのブックマーク (5)

  • TanStack | High Quality Open-Source Software for Web Developers

    High-quality open-source software for web developers.Headless, type-safe, & powerful utilities for State Management, Routing, Data Visualization, Charts, Tables, and more.

  • 自社メディアを ISR を使って爆速にした話

    メディアの紹介 Beyond Magazine というメディアを自社で展開しています。 紙の雑誌を長年やっていたメンバーで作っている web メディアで、グラフィックがいけてるので見てみてください。 技術的には、Shifter Headless をバックエンド(CMS)として、Next.js でメディア体を描画しています。 もともとのアーキテクチャとしてはこんな感じでした。 課題 速度(特に FCP)が遅いときだと数秒かかる Shifter が落ちるとサイト全体が落ちてしまう(しかも割と頻繁に落ちる) という課題がありました。 ISR の導入 導入の経緯 原因としては、リクエストの都度、Shifter Headless から同期的に記事データをフェッチしてから SSR して返すという仕様になっていたことが大きかったです。 Shifter Headless を導入した意図の一つですが、コメ

    自社メディアを ISR を使って爆速にした話
  • Next.js 12

    As we announced at Next.js Conf, Next.js 12 is our biggest release ever: Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds Middleware (beta): Enabling full flexibility in Next.js with code over configuration React 18 Support: Native Next.js APIs are now supported, as well as Suspense <Image /> AVIF Support: Opt-in for 20% smaller images Bot-aware ISR Fallback: Optimized SEO for web craw

    Next.js 12
  • 150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話

    Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドNext.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技

    150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
    lilpacy
    lilpacy 2021/07/27
    > 単一ファイルコンポーネントを採用していたため、template 内で TypeScript の恩恵を十分に受けることができていませんでした
  • Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代

    どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr

  • 1