より速い WEB を目指す Next.js / nextjs-make-the-web-faster【Next.js Update!】v12リリースを踏まえ、Next.jsの採用を考える 本発表は以下URLでアーカイブ視聴が可能です。https://youtu.be/KaS3bgz_CA4 イベントページ：https://forkwell.connpass.com/event/228457/
Vercelを使わずにAWSだけでNext.jsのISR対応!【serverless-next.js】
追加の記事を作成しました。 ※ 混乱させるかもしれないので一応、ところどころamplifyって出てきますが、apiの作成にamplify使っているだけで、デプロイとかにはホスティングにはamplify使ってないので。わかりにくくてすみません。 ※現状では、bucketRegionを指定すると、エラーになってしまいます。 https://github.com/serverless-nextjs/serverless-next.js/issues/1111 解決済み serverless-next.jsでISRに対応したNext.jsをデプロイのサポートが！ついに！ つい先日こちらのプルリクがマージされてました。 まだα版ではありますが。 ということで、やってみました！ 結論躓くことなくうまくいきました！ Vercel使わずにも生きていけるかも！ 実際に試した構成 serverless-nex
JamstackプラットフォームのLayer0へNext.jsのアプリをデプロイしながら試す
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
Next.jsアプリをVercelからGoogle Cloudに移行した話
ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから
最近話題の「frourio」を無料でサクッとデプロイする方法（Vercel + Heroku）
はじめに 最近話題の frourio をご存知でしょうか？ TypeScriptフルスタック環境 を一発で作れるフレームワークです。実際に試してみると分かりますが、簡単に環境構築が出来ます。 こんな簡単に作れるなら、試しにアプリを作って外部に公開するとこまでやってみたいですよね。 この記事では、その環境を Vercel と Heroku を利用し、無料でサクッとデプロイする手順を紹介します。 全体構成 デプロイ先としては、フロントエンドは Vercel 、バックエンドは Heroku を選択しました。 選択理由 選択理由としては以下です。今回は "無料でサクッと" がコンセプトなのでポイントと考えています。 基本的に無料で利用可能なこと インフラレイヤを意識せずに簡単なセットアップで利用可能なこと Vercel と Heroku について Vercel Vercel は Next.js を
Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr
next.js の AMP mode を使って静的サイトを作る
この記事は amdxg を作りながら, next.js で AMP に対応したときにやったことです。 コードはこちらです amdx/packages/ssg at master · mizchi/amdx AMP について Google の推奨する HTML のサブセット仕様です。制約付きのインライン CSS のみ + 一切の JS が書けず、代わりに動きがあるものは amp plugin を使って記述します。 モバイルでは、Google の検索結果画面からは GoogleCDN 上のキャッシュが返却されるので、非常に高速に開くことができます。 (⚡ マークが AMP 対応の印) モバイルに限らず、ある種のベストプラクティスの強制なので、PC でも AMP 対応することに意味はあります。 この記事では、実際にこのブログのための SSG を作る過程で、どのように next.js 上で AMP
Next.jsアプリケーションを動かす環境をaws-cdkを使って構築する(with CloudFront/S3/Fargate) - $shibayu36->blog;
Next.jsをproduction環境で使うために外観を掴んでおきたいと思い、Next.jsアプリケーションを動かすAWS環境をaws-cdkを使って構築するサンプルを作ってみた。だいぶ荒削りだけど、参考になる例にはなったと思う。 https://github.com/shibayu36/nextjs-on-ecs 利用した技術 AWS CloudFront S3 ECR ECS aws-cdk Docker Next.js + TypeScript 今回作ったアーキテクチャ 全てのリクエストをCloudFrontに通すフルCDNアーキテクチャ フルCDNアーキテクチャ実験 / Minami Aoyama Night #1 - Speaker Deck フルCDNアーキテクチャでサービス設計した話 - Speaker Deck next buildで生成した静的ファイルはS3から配信
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js + TypeScript + Tailwind + Storybook プロジェクトセットアップ