Kamal 2 を使い、インフラに詳しくない人でもNext.jsを296円のVPSにデプロイできるよう、説明してみる
9月26, 27日に開催され、めちゃくちゃ盛り上がったRails World 2024でKamal 2が発表されました。Kamal 2はRuby on Railsを作った37signals社が、自社の人気サービスをデプロイするのに使用しているツールです。 37signals社はAWS等のクラウドに年間で$3,201,564を使った(2022年: 日本円で4.5億円ほど)らしく、一方でAWSを使ってもインフラ系人員の削減もほとんどできなかったので、全然割に合わないからもうクラウドはやめて自分たちのサーバを使うと宣言しています。Kamal 2はそのために作られた、本格的なデプロイツールです。 （ちなみに自分たちのサーバを使うと言ってもオンプレミスでサーバを運用するというのではなく、さくらの専用サーバに近いイメージです） Dockerベース Docker化されたアプリなら何にでも対応 (Rail
この本では、初心者・入門者の方に向けて、Next.jsの知識や使い方を体系的にまとめました。 【概要】 ・内容：HTML・CSS・JavaScriptとは？、Next.jsとは？、アプリを作る上での環境を整えよう！、Next.jsのプロジェクトを作ろう！、チャットアプリのパーツを作ろう！、オウム返しAPIを作ろう！、MUIを使ってリッチにしよう！、Vercelにデプロイしよう！、【余談】Joy.uiによるUIの変更 ・所要時間：約3時間 ・必須条件：HTMLの知識、CSSの知識、JavaScriptの知識 ・推奨OS：macOS / windows(WSL2) ・レベル：★★☆☆☆
先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定的です。的外れな議論をしているかもしれません。あくまでもRuby on Railsアプリを書くときと同じ気持ちでNext.jsのアプリを書いたとき、セキュリティ上で気になった点を挙げているだけです。私が見落としている点や誤っている点等ありましたら、コメントやX等で教えていただけると大変ありがたいです。 その１：データ漏洩の危険性 この問題についてはムーザルちゃんねるが紹介しています。またNext.jsの公式ブログでも対策が紹介されて
LX Frontend Night: Unleash Next.js https://github.com/LayerXcom/next-navigation-guard
はじめに この記事では、詳細な技術の話は割愛しています。 「なぜモダナイズをやろうと思ったのか?」 「どんな課題意識があったのか?」 「具体的にどうプロジェクトを進めてきたのか?」 といった、課題設定・意思決定のプロセスに重点を置くことで、同じような境遇にあるチームの意思決定の材料になればと思っております。 RoRの限界...? ダイレクト出版の業務システムはRoR(v6.1)で動いてきました。リリースから6年ほど経っているでしょうか。このシステムは何をするものかというと、例えば、 商品を管理する 顧客を管理する 注文内容を設定する 一斉配信メールを送信する マーケティングオートメーションを設定する 各種分析を行う など、業務に関わるありとあらゆることを行っています。ソースコードは10万行程度で、中堅システムといった具合でしょうか。 実はこのシステム、そこまでレガシーというわけではなく、テ
Storybook 8.3 のリリーつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story globa
Valibot Schema Driven UI - ユーザーがノーコードで自由に UI を組み立てられるエディタを Next.js と Valibot で構築する - ROUTE06 Tech Blog
近年 Bubble や Webflow、日本だと STUDIO などのノーコードプラットフォームが注目を集めています。これらのツールは、プログラミングの知識がなくてもユーザーが思い思いの UI を構築できる機能を提供し、アプリケーション開発の民主化に貢献しています。 このようなノーコードでユーザーが自由に UI を組み立てる仕組みはどのように構築されているのでしょうか。一見複雑に見えますが、基本的な考え方を理解すれば独自のエディタを構築することも不可能ではありません。アーキテクチャの中核となるのは、動的な UI コンポーネントを表現するスキーマ定義と、それを実際の UI 要素に変換する仕組みです。この過程では、データのバリデーション、データ型の絞り込みと UI コンポーネントの動的生成、そしてそれらの適切な配置が重要な役割を果たします。 本記事では、ユーザーがブラウザ上で UI を自由に構
Cloudflare WorkersとNext.jsインテグレーションの問題にOpenNext実装が加わった - laiso
Cloudflareが@opennextjs/cloudflareを発表 2024年9月末に開催された「Builder Day 2024」でNext.jsアプリをCloudflare Workersにデプロイする新たな方法が公開された。 この方法は、@opennextjs/cloudflareを使ってビルドする。既存の@cloudflare/next-on-pages方式を置き換える可能性があり、現在は実験的な段階だ。 以下に新旧の開発手順のドキュメントがある。 新(opennextjs): Next.js | Cloudflare Workers docs 旧(next-on-pages): Get started | Full-stack (SSR) | Next.js apps OpenNextの概要 OpenNextは、Next.jsアプリをVercel以外のインフラにデプロイでき
こんにちは。sumirenです。 イントロダクション 先日、Next.js 15 RCが出ました。App RouterでPartial Prerenderingが広く使われ始める日も近いのではないでしょうか。 Partial Prerenderingは、特にStreamingと一緒に利用し、Vercelにデプロイした場合、強力に最適化が行われます。最適化は非常に高度で、部分的な静的レンダリングといったアプリレイヤから、エッジとオリジンの使い分けといったインフラの構成まで絡む複雑な設計です。最終的にVercelにデプロイされた後の全体の動作イメージが頭に入っている方は少ないのではないでしょうか。 この記事ではPartial PrerenderingとStreamingについて、Vercelデプロイ後の動作イメージがついている状態を目指します。静的ルートやサーバーサイドフェッチなど単純な例から
Next.js App Router 初採用！ 新規プロダクトでの採用理由と決定プロセス - SmartHR Tech Blog
こんにちは！プロダクトエンジニアの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
Next.js 事務局と権利者で利用 アプリケーション基盤となるフレームワークとしてNext.jsを利用しています。2022年の4月頃の開発立ち上げ当時から使い続けています。時期的にもReactで中規模以上のアプリケーションつくるならデファクトスタンダードだったと認識しています。 開発初期はとにかく事業の立ち上げのスピードを優先しており、ゼロコンフィグで簡単にアプリケーションが立ち上がること、ファイルベースルーティングが直感的でわかりやすいことなどが採用の理由でした。 export: static 事務局と権利者アプリケーションともに全てのページでログインしないと利用できないサービスなのでstaticビルドをしています。APIサーバーはJava(Spring Boot)で動いており、ログインが確認出来次第、全てブラウザからAPIコールしています。 ビルド時にAPIサーバーへの通信は発生して
GitHub - leerob/next-saas-starter: Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui.
This is a starter template for building a SaaS application using Next.js with support for authentication, Stripe integration for payments, and a dashboard for logged-in users. Demo: https://next-saas-start.vercel.app/ Why did I make this? In 2020, I made a course called "React 2025" which showed how to build a SaaS application with Next.js, Stripe, and other tools. Well, it's almost 2025 and React
本書はReactベースフレームワーク「Next.js」を利用したWebアプリ開発手法を解説した入門書です。フロントエンドとバックエンドの両方の開発手法について、Next.jsによるWebアプリ開発に精通する著者の三好アキさんが解説しています。 コードを1行1行書きながら、1つのWebアプリケーションを作成するプロセスを丁寧に解説しているので、初心者の方でも挙動を確認しながら安心して学習できます。 Next.jsを利用したWebアプリの開発手法を知りたい方におすすめの1冊です。 目次 Chapter 1 基礎知識と開発ツールの準備 Chapter 2 バックエンド開発の準備 Chapter 3 アイテム操作機能 Chapter 4 ユーザー登録とログイン機能 Chapter 5 バックエンドのデプロイ Chapter 6 フロントエンド開発の準備／ Reactの書き方／ サーバーコンポーネン
1. はじめに Next.js(App Router)をCloud Runにデプロイしようとしたのですが、Next.jsのビルド時に環境変数を設定するのに苦労したので備忘録です。 実はVercelを使えば即効で終わるのですが、それでもCloud Runを使いたい人向けの記事です。 2. 前提 Next.jsの環境変数はCloud Runに設定済みとします Cloud RunにNext.jsをビルドしようとする際はCloud Buildが走りnext buildを行います Cloud Runに環境変数を設定してもCloud Buildは環境変数を知らないので正常にビルドできません Next.jsが正常にビルドできるようにするには.envファイルなどで環境変数を教えてあげる必要があります Dockerfileやcloudbuild.yaml(つまりコード内)に機密情報をハードコーディングするこ
React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir() - Qiita
React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir()JavaScriptTypeScriptReact なんてことはない話なのかもしれないですが…こんな書き方知らなかったよ！ということで。 普通にフロントエンドのjavascriptならconsole.log()でいいんですよ。 ただ、reactなどのバックエンドjavascriptでは普通にconsole.log()を使うと多段の階層では表示されない問題が起きます。 結論で言うとこのように書けばOK。
CAMELORSは、同社の運営している複業マッチングプラットフォーム「SOKUDAN」に掲載されている、実際のフリーランス・副業案件に基づいて作成した、2024年におけるフリーランス・副業の「Next.jsエンジニアの調査レポート」を、9月27日に「SOKUDAN Magazine」にて発表した。 Next.js開発者の平均年収は、フレームワーク別の平均年収ランキングでは6位の1026万円となっている。 フレームワーク別平均年収ランキング Next.jsの案件数は、フレームワーク別案件数ランキング8位で、案件比率としては2.8％を占めた。 フレームワーク別案件数ランキング Next.js案件の稼働日数は、「週4〜5日」（66.7％）がもっとも多い一方で、「週2〜3日」も25％と一定の割合を占めている。なお、「週1日」は8.3％と少数派だった。 Next.jsの稼働日数 Next.js案件の
生成AI時代のNext.jsアプリケーション開発実践
この記事は？ 前回のアップデートからだいぶ時間が空いてしまいましたが、著者がこの1年Next.js周りの開発で着目していたのは生成AIによってスピードアップした開発ができないか どうか、ということです。 著者が思う大きなアップデートはv0を使ってのNext.jsの開発が盛んになってきた ことです。 v0を使ったコード生成 最も簡単なアプリケーションとして、掲示板の開発を考えてみましょう。 v0に対しては以下のような指示を与えてみます。 create a bulletin board site. Frontend should include header, and thread title, each thread include user name, comment この結果、生成されるファイルは以下の通りです: ・prismaに関するファイル群 generator client { p
Next.js (App Router) + Apollo ClientでのGraphQLクライアント実装 - NRIネットコムBlog
本記事は Reactウィーク 5日目の記事です。 📍 4日目 ▶▶ 本記事 📱 はじめに 利用するツール Next.js (App Router) Apollo Client GraphQL-Codegen 前提 実装 型定義コードの自動生成 Apollo Clientの設定 実際にクエリを実行してみる Query Mutation この構成にして良かったこと まとめ はじめに こんにちは、NRIネットコムの辻下です。普段はアプリ担当エンジニアとして仕事をしています。（最近フロントエンドにも挑戦中...） 最近業務でNext.js (App Router) + Apollo ClientでWebアプリケーションでのデータフェッチを実装する機会がありましたので、今回はその実装方法について手短に書いていこうと思います。 利用するツール Next.js (App Router)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サクッと始めるウェブアプリ開発【Next.js / TypeScript】
Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から
Next.js のページ遷移を全力で止める
業務システムのモダナイズを始めました〜RoRからFastAPI × next.jsへ
Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す
Next.jsのPPR + StreamingがVercelで実行されるときの全体像を掴む
はじめに｜サクッと始めるウェブアプリ開発【Next.js / TypeScript】
SimpleでStaticなNext.jsを中心としたフロントエンド技術選定
Next.jsによるWebアプリ開発の入門書、『動かして学ぶ！Next.js/React開発入門』発売
Next.jsをCloud Runにデプロイする際にビルド時の環境変数を設定する
Next.js開発者の平均年収はフレームワーク別ランキング6位で1026万円、調査レポートをCAMELORSが公開