Next.js Conf 2024 全部聞いてみた
こんにちは、絶賛スウェーデンに留学中のきたぴーと申します！今回は Next.js Conf 2024 をリアタイ視聴して内容を大まかにまとめてみたので記事にして共有してみようと思います！ 聞いてみようと思った背景 個人開発でもインターンでもハッカソンでも、自分はいつでも Next.js にお世話になっているので最新機能や、Next.js 開発チームの思想を直接聞くことで視座を少しでも近づけたいと思ったのがきっかけです。タイムテーブルを見ると、「サーバコンポーネントで向上する UX」のような Next.js の機能について扱うものから、Perplexity や PayPal での導入事例のような応用例まで取り上げられていた、かつ Vercel が公式でピックアップしたものなので情報の密度も濃いものだろうと、非常に興味が湧きました。あとは時間の都合も良く、日本だったら深夜の 1:30 スタート
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
localhost(127.0.0.1)をHTTPS化して開発環境を作る - s1r-Jの技術ブログ
普段、開発環境ではlocalhostをHTTPで利用してサーバを立てて遊んでいる。 しかし、WebアプリによってはHTTPSでの挙動の確認やWebAuthnAPI等のようにHTTPSでないとそもそも動作しないものもあり、面倒なことになっている。 会社であれば開発用のドメイン、証明書、EC2のようなサーバを使って好き勝手できるが、個人では億劫なのとお金がかかるのでやれていない（バリバリやれていれば気にもならないがブログすら月1ぎりぎりである）。 localhostのHTTPS化 そんな折、この記事を見つけた。 内容としては、持っているドメインと証明書を使ってlocalhost(127.0.0.1)をHTTPS化するというものである。 ドメインと証明書があれば、自身のPCに立てたlocalhostサーバをHTTPSにできる。 あとはドメインと証明書の確保であるが、証明書は非常に有名なLet's
Nuxt.jsのSSR/CSR処理について
はじめに Nuxt.js の SSR/CSR の処理がどう動いているか（ライフサイクル）、また、安全な処理を書くにはどうしたらいいのか、いまいち分かっていない方や曖昧な方も多いと思います。 今回の記事では、Nuxt.js での開発における SSR/CSR 処理とセキュアなデータの取り扱いについて少し書きます。 ライフサイクルを理解し、Nuxt.js でどのように情報を扱うべきか検討しやすくなります。 AWS や GCP、Firebase、Azure など、クラウドサービスと連携するにあたりセキュアな情報の取り扱いで悩むことが出てくると思います。 AWS でいうと AppSync や API Gateway、S3 などの各種サービスに接続するための認証情報をどのようにフロントエンドで安全に扱うか、という点は気になるポイントだと思います。 この記事は直接ある特定のサービスへの接続方法のソリュー
JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け
対象 業務レベルでサーバーサイドでJestを書いたことはないけれど、新プロジェクトでは書くことになったみたいな方を想定して記述しています。 Jestについては中々ベストプラクティスが集まりにくいので、経験的にこう書くと「きれいに」・「早く」・「正確に」書けるよというTipsを集めてみました。もし、よろしければお読みください。 前提 TypeScript Node.js Jest DBアクセスありの状態を想定しています 1. it文内では、必ず1回は、expectをつかって検証をする JestのPRをレビューしてるとたまに見受けるのですが、expectを使ってないケースがあります。 // NG it('userを正常に、作成できること', async() => { await createUser({ name: 'Mike' }); }); // OK it('pdfが正常に削除できること
React Server Componentsに感じたフロントエンドの消失
はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの？」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで
Next.jsをサーバーレスでやっていくためのServerless Next.js Component - Sweet Escape
今回は最近その存在感がますます上がっているNext.jsとサーバーレスの話です。 はじめに サンプルアプリ Serverless Next.js Component デプロイ 作成されるリソース CloudFrontのディストリビューション Lambdaファンクション S3バケット 大まかな挙動 できないこと まとめ はじめに この投稿は2020年11月27の21時から開催予定のイベント（ライブストリーミング）で話す内容です。 serverless-newworld.connpass.com もし間に合えば、かつ時間があればぜひライブ配信のほうにも参加ください。 さて、今回は11/9に登壇させていただいたFront-End Studyでの話でも少し紹介したServerless Next.js Componentについて取り上げます。 僕は昨今のフロントエンドWeb周りの技術では最近は一番N
AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、JAWS-UG 浜松支部の松井です。 普段からモノリシックな環境やそれに準じる環境での Web アプリケーションの開発、保守に取り組んでいますが、継続的にサービスを運用していく上では様々な悩みが尽きません。 OS のバージョンアップ、セキュリティパッチはどうするか ? 言語やミドルウェアのバージョンはどうするか ? ステージング、本番等の環境のデプロイはどうするか ? コスト最適化はどうするか ? etc・・・ そこで、サーバーレスアーキテクチャを採用することにより、こう言ったホストマシンやネットワークの管理に起因する悩みを軽減することができます。 とはいえ、いきなりサーバーレスに着手するとしても、 本当にちゃんと動くのか ? 設計、構築が難しいのではないか ? コストはどのくらいかかるのか ? まずどこから手をつければ良いのか ? と言った疑問があると思います。 今回はそう言
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
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クライアントの組み合わせは、フロ
「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX開発者ブログ
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
Nuxt.jsでnoteの記事ページを置き換えました｜こんぴゅ
noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを
Nuxt.js＋Apollo ClientでCRUD操作 / ユーザー管理画面でQuery, Mutation, Subscriptionを実装 | Takumon Blog
なにこれ 以前の記事設定いらずのNode製GraphQLサーバー「Graphpack」の使い方でGraphQLのサーバー側を実装を紹介しました。 Graphpackは備え付けのGraphQL Playground IDEで動作確認できますが、せっかくなので今回はクライアント側も作成してみました。 本記事では**Nuxt.jsとApollo Clientを使って簡単なユーザー管理画面を作成する方法をチュートリアル形式でご紹介します。** 最終的にはQuery, Mutation, Subscription全てを実装しますが、 以下のようにステップを分けて、少しずつ実装していきましょう✨ 🔰 プロジェクトのひな型を作成する 💪 Queryを実装する → ユーザー情報が一覧で表示できる 💖 Mutationを実装する → ユーザーの登録・更新・削除ができる 💎 Subscriptionを
Shibu's Diary: DeNAからフューチャーに転職して1年4ヶ月が経ちました
転職エントリーと退職エントリーは見かけるけど、途中の感想エントリーをみかけないので、つらつらと書き連ねたいと思います。だいたい1年4ヶ月ぐらい経って、一通り会社の雰囲気はわかって来たかなと。写真は五反田の西安飯荘の坦々刀削麺です。 http://blog.shibu.jp/article/181834465.html#more 仕事はFutureVulsの開発をちょびっとお手伝いしたのと、あとは客先常駐です。うちの会社では客先常駐は基本的に少なくて、打ち合わせはお客様のところにいくけど開発は自社に持ち帰って行う、ということが多いので、レアケースのようですね。自社の方が席が広かったりもろもろ快適ではありますが・・・今のお客様のレベルは高くて、他のベンダーさんからきている人たちのレベルも高くて良い感じです。エリートが揃っている感じ！ B2Bなお仕事はどうなのか お客様と直接お仕事をする一次受け
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsでAuth Moduleを使ってログイン機能を実装する - Qiita