vercelでの環境変数の扱いが便利になった
Vercel での環境変数周りでのあれこれ、ずっと苦しみ続けていたので自分なりのプラクティスをメモします。 辛さの原因は Vercel のアップデートのスピードが早く正しい情報にアクセスし辛いことが一因としてあるので、それをなくせたら良いなと思っています。 もしこのドキュメントが古くなっていたら Issues などからお知らせていただけると幸いです。 Next.js を前提とした解説になりますが、 Next.js の環境変数周りについては解説を省きます。 Vercel での環境変数周りがややこしいのは Next.js に起因しているものもあるとは思うのですが、話が長くなるので別の記事にて補足したいと思います。 (ビルド時・サーバー・クライアントで見える・渡せる環境変数や方法が変わる話) やりたいこと: フロント側から環境変数別にエンドポイントを切り替える Vercel は プレビュー環境と
Next.js に GoogleAnalytics と GoogleTagManager を導入し計測する - ┗┐＜(՞ਊ՞)＞┌┛
Next.js でアプリケーションを作った際に、アクセス解析などやりたく GoogleAnalytics を導入しました。GoogleAnalytics をそのまま使うのではなく GoogleTagManager を経由すると何かと便利なので、Next.js → GoogleTagManager → GoogleAnalytics という流れで計測を行えるようにしました。 現状、インターネットにはエンジニア目線で GoogleAnalytics や GoogleTagManager について書かれた記事が少なく、これを書くことで何かの助けになると感じましたので、ここに記録しておきます。 ところで GoogleTagManager は長いので以下 GTM とします。また GoogleAnalytics も長いので以下 GA とします。 GoogleTagManager を設定する アカウント
This document is for Next.js versions 9.4 and up. If you’re using an older version of Next.js, upgrade or refer to Environment Variables in next.config.js. 引用：Basic Features: Environment Variables | Next.js
steelydylanです。たまにOSSを開発する機会があるのですが、以前OSSを公開する時にVuePressのような気軽な静的サイトジェネレーターがReactにもあったらいいのにと探していました。 その時にNextraというとても素敵なツールを見つけたので紹介させてください。 Nextraとは Nextraの公式サイトに行けばわかることですが日本語で簡単に解説させてください。 Nextraは、Next.jsとMDXで動作するスタティックサイトジェネレーターです。実際にNext.jsを開発しているVercelで働かれているshudingという方が作られているので信頼性は高そうです。 例えば、Reactのデータフェッチ用のhooksであるSWRというライブラリのサイトもNextraで作られています。 Nextraを使えば、Next.jsを知っている人はさらに便利に使えますが知らなくてもノーコ
Next.js最速セットアップ
はじめに 最近Next.jsが話題になることや、使われることが増えてきましたね。 個人的にも実務でも個人開発でも愛用しています。 そこでこの記事では、基本的なNext.jsプロジェクトのセットアップ方法についてまとめてみたいと思います。 セットアップ手順 Create Next App 不要なファイルを削除 srcディレクトリを追加 TypeScript導入 ESLint導入 Prettier導入 Chakra UI導入 Jest導入 Renovate導入 Cypress導入 Storybook導入 hygen導入 Create Next App まずはCreate Next App[1]で雛形を作成しましょう。 ターミナルで以下のコマンドを入力します。 必要であればこの段階でGitHubなどのリモートリポジトリと連携してください。（後にGitHub ActionsでCIを使用するところが
Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping revalidate ← この記事 fetchCache (後日公開) Incremental Static Regeneration / ISR Next.js では、もともとレンダリング方法のひとつとして、Incremental Static Regeneration = ISR が利用可能でした。 静的なページ生成を前提としながらも、一定間隔を超えた時点でページを再生成してくれる仕組みで、間隔は、getStaticProps の revalidate オプションで指定可能でした。 export async function getStaticProps() { const res = await fetch("https
Next.js でページを見る権限が無いユーザに対しリダイレクトする処理を集約した - ┗┐＜(՞ਊ՞)＞┌┛
Next.js でユーザ認証付きアプリケーションを作っていると「ページを表示したとき、ユーザの状態によってはリダイレクトして、別のページに飛ばしたい」というケースがあります。単純にログインしていないというものから、ユーザに閲覧権限がないなど、見れないなどいくつかケースがあると思います。 例えば、一般アカウントと管理者アカウントが存在するウェブサービスを考えてみます。これらはどちらも「User」というモデルとすることにします。そしてその「User」は内部に「一般アカウントか、管理者アカウントか」という情報を持っていて、特定の url のページは管理者でないと見れないとします。ページを表示するとき、この「User」を API で叩いて初めてどちらかがかわかる、という状態です。 例えば管理者ユーザ用の「admin/」 パス以下を考えます。これは管理者ユーザしかアクセスできないパスであるので、この
Next.js 9.2
We are excited today to introduce Next.js 9.2, featuring: Built-In CSS Support for Global Stylesheets: Applications can now directly import .css files as global stylesheets. Built-In CSS Module Support for Component-Level Styles: Leveraging the .module.css convention, locally scoped CSS can be imported and used anywhere in your application. Improved Code-Splitting Strategy: The Google Chrome team
Next.jsのデメリット【欠点】を理解する - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。 決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。 本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。 Next.jsとは Next.jsの短所 技術的な短所 プロジェクトにNext.jsは必要か？ 最後に Next.jsとは Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。 Next.jsの最初の作成者は、VercelのCEOであるGuillermo Rauch氏でした。 Next.jsのサーバーレスアプローチにより、Vercelを使用してWebサイトおよびアプリをデプロイできるため、ホスティ
React初心者に捧ぐNext.jsのススメ
これはSupershipグループ Advent Calendar 2020の7日目の記事です。 この記事では、フロントエンド開発を始めたばかりの人へ向けて、フレームワークを選ぶ際の参考になれば、と思って書かせていただきました！ (※書き終わって見返すと、半分レンダリングの話してたので、タイトル詐欺かもしれない) 前提 対象読者 フロントエンド開発初学者 この記事のゴール 対象読者がフロントエンド開発をする時に、Next.jsが選択肢の1つとしてあがるようになる イントロダクション HTMLファイルとJavascriptだけでwebページを構築していた頃と比べて、昨今のフロントエンド開発は選択肢がたくさん増えています。 それは、偉大なプログラマ達が様々な機能を持ったフレームワーク/ライブラリを生み出してくれたおかげです。 我々はこれらの恩恵にあずかり、複雑なwebページを簡単なコードで実現す
Next.jsのCSR(SPA),SSR,SSG,ISRのまとめ&メリットデメリットについて - Wiz テックブログ
はじめまして。最近無性に海外旅行に行きたいと思っているフロントエンドエンジニアの内田です。 Next.jsってページごとに色々なレンダリング方法を柔軟に切り替える事が出来て便利ですよね。 ですが、利用する際にはきちんとそれらレンダリング方法のメリットとデメリットを理解する必要があるのでここにまとめておきたいと思います。 ではいってみましょー！！ ■CSR（Client Side Rendering） そのままなんですが、クライアントサイドでレンダリングするフロントエンド技術手法のアーキテクチャのことを指します。 ブラウザからHTTPリクエストされると、サーバー側はビルドされたJSとCSS、中身ほぼ空っぽなHTMLファイルをHTTPレスポンスとして返却します。 初回アクセス時はHTMLファイルの中身はほぼ空なので何も表示されず、その後初期データを取得してブラウザがHTMLをレンダリングします
Server-Side Rendered Real-time Web App with Next.js, AWS Amplify & GraphQL
Server-Side Rendered Real-time Web App with Next.js, AWS Amplify & GraphQL In this blog post we will go through building a server-rendered realtime collaborative todo list app with Next.js and AWS Amplify. You can check out the final code here and a demo here. Introduction Creating our app skeleton Adding offline functionality Preparing the Graqhql Schema for Amplify GraphQL Transform Setting up A
こんにちは、柴田です。 Next.js 9.3からPreview Modeがサポートされました。 Preview Modeは完全にヘッドレスCMS向けに作られた機能です。 静的生成によるJamstack構成は高パフォーマンス、高セキュリティを実現しますが、プレビューの実現には工夫する必要がありました。 下書き状態の記事を確認する際に、その都度ビルドを走らせてページを生成するのは時間がかかりすぎてしまうためです。 そこで今回のNext.jsによるPreview Modeの登場です。 Preview Modeを利用すると静的生成ロジックをうまく利用してサーバーサイドレンダリング（SSR）を行い、プレビューを実現することができます。 API Routesまず前提として、Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。 `/pages/api/`以下のファイルはサ
Environment Variables Examples Environment Variables Next.js comes with built-in support for environment variables, which allows you to do the following: Use .env to load environment variables Bundle environment variables for the browser by prefixing with NEXT_PUBLIC_ Loading Environment Variables Next.js has built-in support for loading environment variables from .env* files into process.env.
next/image はやっぱりすごかった - 機能紹介/パフォーマンス改善例/気をつけポイント | Wantedly Engineer Blog
こんにちは、普段はある高専の情報科4年に通いながら、Wantedly, inc で長期インターンをしています。 https://www.wantedly.com/id/igsr5 最近は技術的・ソフトウェア設計的な話をたくさんの人としたいなと強く思っているので是非 @igsr5_(Twitter) を覗いて欲しいです。（フォロー返します） 個人的な話になりますが、先日自身のポートフォリオサイトをリリースしました。 https://igsr5.dev 後からパフォーマンスチューニングの勉強をしたかったのであえて重たく実装したのですが、next/image を導入したところ想像以上にパフォーマンスが向上したのでブログにします。 TL;DRnext/image の機能紹介next/image を導入すると勝手に色々いい感じになる画像フォーマット/サイズ最適化, Lazy load, 良さげなキャ
経緯 趣味が手芸（ミシン）の妻からある日突然、slack でこんな画像が送信されてきました。 特に難しいものではなかったので、隙間時間でサッと作って Cloudflare Pages にデプロイしました。 Cloth Price Calculator 計算したログを残せたほうがいいんじゃないか、そのログから合計をだしたりできたほうがいいのではないかなど色々と提案してみたのですが、これくらいシンプルなほうが使い勝手がいいとのことだったので希望通りに実装しました。 結果そこそこの反響があり、せっかくなのでオフラインでも動作するように PWA 対応をしてみました。 Next.js で PWA 対応 https://github.com/hbsnow/cloth-price-calculator/tree/v1.0.0 対応前のコードは上記になります。 ここでは Next.js の公式サイトにある
Next.js はほとんど React アプリ開発のスタンダードになっているようですが、認証機能の実装に少し困りました。 要件は以下です🧐 AWS Cognito を使いたい なるべく早く構築したい セキュリティを犠牲にしたくない 今回は cognito を Next.js に良い感じに埋め込む方法をやってみたいと思います！！ 細かい部分の解説まではしませんので、コードを確認してみたい方はこちらをどうぞ🙌 やる Cognito 設定 ほとんどテンプレート通りなのでざっくりいきます！ ユーザープールを作成しますが、「デフォルトを確認する」でOKです。 基本はデフォルトですが、アプリクライアントだけは設定が必要なのでここで済ませましょう。名前を入力するだけでOKです。 ユーザープールが正常に作成されればOKです。 認証関係の画面には Hosted UIを利用するのでアプリクライアントを統合
Best practices to increase the speed for Next.js apps - Stack Overflow
[Ed. note: While we take some time to rest up over the holidays and prepare for next year, we are re-publishing our top ten posts for the year. Please enjoy our favorite work this year and we’ll see you in 2023.] In recent years, web application development has undergone a radical transformation due to the rise of Next.js. This framework allows developers to build powerful web apps with JavaScript
Vercel + Next.js + micro CMSで作る、jamstackなCMS構築 - Qiita
概要 こんにちは、都内でフロントエンドエンジニアをしてますかめぽんです。先日、便利なツールしか開発しないことで有名なあのZEITの名前が変わりVercelになった、というニュースは記憶に新しいかと思います。どんどん使い勝手がよくなっていくということで注目していきたいわけですが、昨今ではjavascrptあるいはtypescriptを中心としたアプリケーションが主流になっている中で、jamstackと呼ばれるアーキテクチャが注目されていると思います。jamstack自体は過去に執筆した記事でも紹介していて、基礎的な内容はそちらで確認してみてください。 以前はNuxt.js + Contentful + Netlifyの組み合わせでやってみましたが、今回はVercelのプロダクトと国産のヘッドレスCMSで有名なmicro CMSを使って、jamstackなブログサイトを作ってみたいと思います。
Next.jsでTailwind CSSを使えるようにする **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 **また、Tailwind CSSとはユーティリティファーストのCSSフレームワークです。**その特徴は、Tailwind CSSによって提供されるクラスを組み合わせてコンポーネントを作り、サイトをデザインしていくところにあります。さらにCSSフレームワークなので、CSSに慣れていない人でも簡単に使うことができます。 関連記事:
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
はじめに 👋こんにちは！Web系の企業に勤務し、地方からフルリモート勤務をしている@takakouと申します🏙️✨ 今回は、「Next.js × Go のWebアプリをDocker上で作成してみませんか？ 〜環境構築編〜」というテーマで記事をシェアします！📝🐳 この記事を執筆しようと思った経緯としては、私自身が Next.js × Go × Dockerの組み合わせでアプリを作成しようとした際、この技術スタックに関する情報が少なく、詰まることも多かったからです😫💡 そこで、同じように、この組み合わせの技術スタックに興味を持つ初学者の方々のために、Dockerを使用して環境を構築する方法を詳しくシェアしたいと思いました🌟 記事執筆は未熟者で、至らない点もあるかと思いますが、皆さんのコメントやフィードバックをお待ちしています！🚀💬 目次 対象者 👨 動作環境 🖥️ 技術選
Building an effective Image Component | Aurora | Chrome for Developers
Images are a common source of performance bottlenecks for web applications and a key focus area for optimization. Unoptimized images contribute to page bloat and currently account for over 70% of the total page weight in bytes at the 90th percentile. Multiple ways to optimize images call for an intelligent "image component" with performance solutions baked in as a default. The Aurora team worked w
Building Modern Applications with Next.js and MongoDB | MongoDB
BlogAnnounced at MongoDB.local NYC 2024: A recap of all announcements and updatesLearn more >>
静的サイトジェネレータ、もといMPA向けbetter webpackとしてのNext.js - console.lealog();
（SSR不要論者のはしくれとして）今までこれっぽっちも気にしてなかった、あのNext.jsです。 ここでいうSSRは、クライアントのリクエストに応じてSSRしてレスポンスを返すこと。 ただ最近仕事で使ったり、副業でも使ってたりする機会があって、一部認識を改めたところがあるのでそれをメモっておく。 静的サイトジェネレータとしてのNext.js それは、「元来のサーバーレンダリング用ミドルウェアとしてではなく、SSGを目的としたプリレンダリング用ツール」として見れば、実は結構よいのでは？というもの。 コマンドでいうところの`next build && next export`だけを使う前提。 プリレンダリングで最適化した静的なサイトにしたい けど、それぞれのページにはJSを使った処理がある 前者だけの場合は、だいたい`11ty`みたいないわゆる静的サイトジェネレータが検討されるけど、各ページで
ISRでブログを作ってみて気づいたこと・ハマったこと
この記事は Next.js Advent Calendar 2020 2 日目の記事です。 先日このブログと別にもう一つ別で、til.ojisan.ioというブログ的なものを作ってみました。 これはブログというより、毎日調べたことをメモするために使っています。 （というのは建前で NextJS の ISR で作る題材として作っただけです。） ISR(Incremental Static Regeneration)は NextJS9.4 で追加された機能で、動的な SSG とキャッシュを駆使したレスポンスをしてくれます。 これは SSG のデメリット（ビルド時間）を削減し、メリットのみを享受できます。 ISR についてはすでに様々な方が触れているので自分が今更触れなくてもいいと思っていたのですが、実際に使ってみた意見などは意外とないことに気づいたので、素振りをしてみた気付きやハマったことを共
表題の通りですが、Next.jsでShopifyのストアフロントをつくってみました。 もともと業務でShopifyを使っていて、技術的にSSRやSSG・ISRなどの様々なレンダリング方法に対応したNext.jsに興味があったので、その二つを合わせるような形でストアを構築してみました。 デザインはShopifyのデフォルトテーマであったDebutテーマ(いまはDawnになりましたね)を参考にしています。 (gif貼ろうとしたけど重いのか失敗...) 使用技術など ストア: https://nextjs-shopify-store.vercel.app リポジトリ: https://github.com/naoya-kuma1990/nextjs-shopify-store 使用技術: React, Next.js, TypeScript, Tailwind CSS, Material UI,
こんにちは、岩城です。 Serverless Nextjs Pluginについて調べる機会がありました。 このプラグインを使うと以下のような環境を作ってくれます。 (公式サイトからの引用) 本エントリでは、Serverless Frameworkの導入方法をはじめ、実際にデプロイしてみてどんなリソースが作成されるかを紹介します。 なお、筆者はアプリケーション開発全般よく分かりません。 やってみた Serveless Framework セットアップ まっさらな環境でセットアップしたかったので、新規で起動したEC2上で試しました。 $ cat /etc/system-release Amazon Linux release 2 (Karoo) Amazon Linux 2はデフォルトでNode.jsがインストールされていません。 はじめにNode.jsをインストールします。 $ curl -
Image コンポーネントの特徴Next.js が提供している Image コンポーネント (next/image) を使用すると、image 要素をそのまま配置するのに比べて次のような恩恵を受けられます。 遅延ロード (Lazy loading)Web ブラウザでその画像がビューポート内（画面内）に入って来たときに初めてダウンロードされるようになります。大きなページの末尾部分に配置された画像が、無駄にダウンロードされてしまうのを防ぐことができます。画像の最適化アクセスしてきたクライアントに応じて画像ファイルを最適化して配信します。例えば、圧縮効率のよい WebP フォーマットなどに変換してくれます。リクエスト時にサーバーサイドでオンデマンドで最適化するため、Image コンポーネントを使うことでビルド時間が伸びてしまうことはありません。外部サーバーの画像を間接的に表示する場合も最適化でき
Yarn
Rails 6.1対応版: APIモードのRailsに対してCrossOriginなSPAからSession認証する方法 - Qiita
本記事では、APIモードのRailsに対してCrossOriginなSPAからSession(Cookie)認証する方法を解説します。 モダンなフロントエンド開発だと、Auth0やFirebaseを使った認証例が多く見られますが、バックエンドにRailsを使った認証例はまだまだ少ないと感じています。 JWT認証ではなくCookie認証となると、その数はさらに少ないようです。 実際にやってみるといろいろな障壁があることがわかったので、やるべきことをまとめることにしました。 背景 Next.jsアプリをVercelに、データ永続化とユーザ認証を目的としたAPIモードのRailsアプリをHerokuにデプロイしています。 この状況でNext.jsアプリからRailsに対して認証を試みると、CrossOriginなリクエストであるが故に様々な障壁があります。 本記事に記載する内容はバックエンド側が
GraphQL is stepping in to the 6th year in 2021 and is seeing great adoption in the developer community. We have compiled a short list of 5 best resources (in no particular order) specifically catering to Next.js developers, since it's one of the most popular frontend frameworks in the community. The list broadly focusses on the categories like GraphQL clients, data fetching, authentication, API ro
この記事は Next.js アドベントカレンダー 2019 の 7 日目の記事です。 はじめに Chrome Dev Summit 2019 に参加してきたのですが、その中で Google が Next.js を手厚くサポートしているという話があり、特にビルドと配信について興味深かったのでかいつまんで紹介します。 なお該当の動画は以下にあります。13分あたりから Next.js についての話になります。 https://developer.chrome.com/devsummit/sessions/advancing-the-web-framework-ecosystem/ 現在の JS のビルドと更なる最適化 現在の JavaScript のビルドでは、 Webpack + Babel を使用しているフレームワークが多くあるかと思います。 そして ES2015+ や TypeScript
Next.js の SSR は面倒くさい SSR を考えない場合、外部から取ってきた非同期データのレンダリングは、コンポーネント内に取得処理を置いて、受け取れた時点でデータを表示という流れで比較的簡単に記述できます。しかし SSR で初期 HTML に非同期データを加えようと思うと、一気に面倒になります。 何故面倒なのかと言えば、Next.js の初期レンダリングは非同期に対応していなかったからです。そのため、一般的な方法で SSR をやろうとするとgetInitialPropsやgetServerSidePropsを使って非同期データを収集し、コンポーネントにデータを引き渡す流れになります。 この構成の問題点は、クライアントで再フェッチが必要になったときに、サーバ側とクライアント側で別々に処理を書かなければならないことです。 実は可能になっていたコンポーネント側からの SSR データ作成
![[Next.js] urql で GraphQL のデータをコンポーネント上の hook のみで SSR](https://cdn-ak-scissors.b.st-hatena.com/image/square/e83cc1fa9a211bd68ebe758129364a0e68f72341/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--9hanyKFm--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520urql%252520%2525E3%252581%2525A7%252520GraphQL%252520%2525E3%252581%2525AE%2525E3%252583%252587%2525E3%252583%2525BC%2525E3%252582%2525BF%2525E3%252582%252592%2525E3%252582%2525B3%2525E3%252583%2525B3%2525E3%252583%25259D%2525E3%252583%2525BC%2525E3%252583%25258D%2525E3%252583%2525B3%2525E3%252583%252588%2525E4%2525B8%25258A%2525E3%252581%2525AE%252520hook%252520%2525E3%252581%2525AE%2525E3%252581%2525BF%2525E3%252581%2525A7%252520SSR%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_98%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fog-base.png)
業務にて Cloud Run内でNext.jsアプリを動かすことになった。 その時イメージサイズについて四苦八苦した結果、ある程度の最適化ができたのでその時の検証結果をここに記しておく。 準備編：イメージサイズ検証のためのアプリケーション yarn create next-app コマンドのオプションを設定することにより、Docker内で動作するサンプリアプリケーションのテンプレートを作ることが可能なので今回はそれを利用して検証してみる。 以下のコマンドで nextjs-docker というアプリケーションが作られる。 $ yarn create next-app --example with-docker nextjs-docker ... $ cd nextjs-docker ＄ yarn dev yarn run v1.22.19 $ next dev ready - started
リポジトリのセットアップ GitHubにプライベートでリポジトリを作成します。私はamplify-ssr-tutorialという名前で作成しました。 Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project amplifyssrtutorial ? Enter a name for the environment dev ? Choose your default editor: IntelliJ IDEA ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript fra
Next.jsを利用したプロジェクトを久しぶりに始めたいので、Next.jsのリソース調査をしてみました。 ライブラリ・プラグイン next-routes そこそこ複雑なルーティング対応する時に便利 https://github.com/fridays/next-routes next-seo SEO対策として便利 OpenGraphやJSON-LDに対応、説明も詳しい https://github.com/garmeeh/next-seo#readme next-offline offline対応用ライブラリ https://github.com/hanford/next-offline next-auth https://github.com/iaincollins/next-auth 認証関係のライブラリ nookies https://github.com/maticzav/noo
Introduction AWS Amplify is a set of purpose-built tools and features that lets front-end web and mobile developers quickly and easily build full-stack applications on AWS. In this post, we'll convert Figma components to React components with Amplify studio and use it in our application. View the source code on Github Prerequisites The following are required to follow along in this post: Basic kno
Next.jsとHono RPCで安全・爆速開発
AVベースはNext.js（Pages Router）のモノリスで作っています。画面から呼び出すAPIには Next.js の API Routes を使っています。API RoutesはHTTPメソッドを自分でハンドルする必要があったり、エラーハンドリングを各ファイルごとに行う必要があったりと、そのまま使うにはあまり便利ではありません。 そこでAPI RoutesでHonoを使うことにしました。Honoは高速かつ様々なランタイムで動作することで人気ですが、型推論を利用した RPC 機能も搭載しています。RPCによってサーバー・クライアント間の型が接続されたことで、画像のような快適な開発が可能になりました 左がサーバー側、右がクライアント側のコード。サーバー側のリファクタリングがクライアントにも反映される様子（リクエスト・レスポンスともに message というフィールドを text に置
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js における環境変数 (env) の基本的な設定方法 | fwywd（フュード）powered by キカガク
Next.jsベースの静的サイトジェネレーターNextraが非常に便利だった話
Next.js 13 の cache 周りを理解する - revalidate
Next.jsのPreview Mode＋Vercelでプレビュー機能を実現する
Configuring: Environment Variables | Next.js
Next.js で作成した Web アプリを PWA 対応する | DevelopersIO
Next.js アプリに Cognito の認証を良い感じに設定する
https://programmagick.com/blogs/node_typeorm/
Next.jsにTailwind CSSを導入する - パンダのプログラミングブログ
【React】複数ページに分割し進捗を表示する入力フォームの設計
Next.js × Go のWebアプリをDocker上で作成してみませんか？ 〜環境構築編〜 - Qiita
Next.jsでShopifyのストアフロントをつくってみた
Serverless Nextjs Pluginを試してみた | DevelopersIO
Next.js の Image コンポーネントで画像を表示する (next/image)
Top 5 GraphQL Resources for Next.js Developers in 2021
Next.js と Differential Loading - Qiita
[Next.js] urql で GraphQL のデータをコンポーネント上の hook のみで SSR
Cloud Run上で動かすNext.jsアプリのDockerイメージサイズを軽くする
Amplify ConsoleでServer Side Renderingするチュートリアルを作った
Next.jsでウェブ開発をするにあたって知ってると便利なリソース集
From Figma to Next.js App in Minutes