【Next.js】On-Demand ISRが安定版になったよ！ | マイナビエンジニアブログ
Next.js 12.1よりBetaとなったOn-Demand ISRが、6/29にリリースされたNext.js 12.2より安定版となりました！ これでようやく外向けの環境で動作するサービスに使用できるようになったので、今回はこのOn-Demand ISRについて紹介しようと思います。 そもそもOn-Demand ISRとは On-Demand ISRを説明するには、まずSSGとISRについて説明する必要があります。 SSGとは SSGとは、Static Site Generationの略で、その名の通り静的サイトを生成する機能のことを指します。 旧来のRailsやLaravelのようなMPA、あるいはRemixのようなSSRフレームワークは、アクセスが発生した段階でサーバーサイドでサイトをレンダリングしますが、SSGはアクセスよりもはるか前、デプロイ前のビルド時 (記述したコードを実際
リリースから5年、Webフロントエンドの経年劣化と向き合う
@herablog さん、@shunke07 さんと共に Muddy Web #3 で発表した資料です。 https://cyberagent.connpass.com/event/261115/ news.ameba.jpは5年前にデスクトップ版ではReact化、モバイル版ではAMP化が行われました。当時は最先端の技術でしたが時が経つにつれて技術的なトレンドも変化しています。TypeScriptやTanStack、Core Web Vitalsの登場によりWebフロントエンドの技術構成は日々進化しています。 時代の流れに合わせてAmebaNewsでは、脱AMP、脱SPAやTypeScript化などを行いましたので紹介いたします。
Fastly で Next.js アプリケーションを実行
Fastly の新しい next-compute-js ライブラリを使用することで、Compute@Edge プラットフォーム上で Next.js アプリケーションをホストできるようになりました。これにより、Next.js 開発者のエクスペリエンスが向上し、圧倒的なスピードを誇る Fastly のグローバルエッジネットワークのメリットが得られます。オリジンサーバーも必要ありません。 Next.js は広く普及している JavaScript ベースのサーバーフレームワークで、開発者に優れたエクスペリエンスを提供します。具体的には、フロントエンドのコードを React で作成できるほか、ごくわずかな設定で本番環境に必要な優れた機能 (ハイブリッドの静的レンダリングとサーバーレンダリング、スマートバンドル、ルートプリフェッチなど) を直感的にセットアップできる便利さを備えています。 Next.j
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
Next.js アプリに Cognito の認証を良い感じに設定する
Next.js はほとんど React アプリ開発のスタンダードになっているようですが、認証機能の実装に少し困りました。 要件は以下です🧐 AWS Cognito を使いたい なるべく早く構築したい セキュリティを犠牲にしたくない 今回は cognito を Next.js に良い感じに埋め込む方法をやってみたいと思います！！ 細かい部分の解説まではしませんので、コードを確認してみたい方はこちらをどうぞ🙌 やる Cognito 設定 ほとんどテンプレート通りなのでざっくりいきます！ ユーザープールを作成しますが、「デフォルトを確認する」でOKです。 基本はデフォルトですが、アプリクライアントだけは設定が必要なのでここで済ませましょう。名前を入力するだけでOKです。 ユーザープールが正常に作成されればOKです。 認証関係の画面には Hosted UIを利用するのでアプリクライアントを統合
RubyKaigi2022スケジュールアプリ、フロントをNext.jsに移行してみてわかったこと - SmartHR Tech Blog
こんにちは、開発者のkinoppydです。こんにちは。 SmartHRでは、去年から引き続きRubyKaigiにスケジュールアプリを提供しています。事前にRubyKaigiスケジュールから「拙者のセットリスト」を作成してもらい、SNSで他の参加者とシェアして楽しんでもらうことを目的にしています。 これが今年のワイのセトリや！https://t.co/vZ3nGrPlCt #rubykaigi— kinoppyd (@GhostBrain) 2022年9月1日 去年のソースコードを利用しつつ、今年は新しいチャレンジとしてフロントの環境をNext.jsに移行してみようと考えました。去年の時点で、フロントはほぼReactで書かれており、helperという名の実質APIも書かれていたので、そんなに大きな手間にはならないだろうと思いましたが、とはいえ色々と起こったのでその様子をお伝えしたいと思います
Next.jsとdevise_token_authを使って認証周りを実装する - 行動すれば次の現実
前回、Rails7 APIモードの認証機能をdevise_token_authで実装するという記事で、devise_token_authの導入方法や使い方を一通り説明いたしました。 今回はNext.jsとdevise_token_authを使ってログイン処理と認証制御周りを具体的な実装例を踏まえて説明します。 認証処理はクライアントサイドで行うか、サーバーサイドで行うか まず実装に入る前に、認証処理をクライアントサイドで行うのか、サーバーサイドで行うのかを決める必要があります。 クライアントサイドで認証 クライアントサイドで認証を行う場合は、認証用のAPIを別途設けて、その結果により遷移先を分けるという実装をします。 認証結果が真の場合は、該当ページへの遷移を許可し、偽の場合はログインページへリダイレクトさせます。 クライアントサイドでの認証の場合、ページリクエストの前に毎回認証用APIが
Next.jsでSentryにソースマップを送信する
こんにちは、株式会社スタメンで FANTS の開発をしている@0906kokiです。 今回は Next.js のアプリケーションに Sentry を組み込む方法と、ソースマップを送信して Sentry 上でトランスパイル前のコードでエラー箇所を見れる方法について書きたいと思います。 Sentry とは？ Sentry とは、エラートラッキングサービスで、アプリケーション上で発生したエラーの内容、ユーザー、ブラウザ情報等を通知することができるサービスです。類似サービスとしては Bugsnag や Datadog 等がありますね。 React や Vue などは、トランスパイルをして圧縮、難読化された JavaScript のコードに変換すると思いますが、トランスパイル後のコードでエラー発生箇所を通知しても、エラートラックすることは難しいです。 なので、Sentry に対してソースマップファイ
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
なぜNext.jsをやめたのか？ - Hello Tech
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 この記事では、AutoReserveウェブ版が、Next.jsを一度採用したがやめ、その後create-react-app + react-routerの構成に移行した経緯を書きます。 ウェブ版開発の背景 AutoReserve はAIが電話予約を代行してくれる飲食店向け予約グルメアプリで、現在はiOS / Android / ウェブにサービスを展開しています。 元々はReact Native製のネイティブアプリのみ展開していましたが、ユーザ獲得の面でウェブ版が必要となったため、 追加でウェブ版を実装し、現在の3プラットフォームでの展開に至ります。 最初の技術選定 ウェブ版の最初のバージョンでは、フレームワークとしてNext.jsを採用しました。Reactで書け、SEOのた
Next.jsのAPI Routesを使ってmicroCMSの検索APIを作成する - Qiita
みなさん microCMS 使ってますか？ めちゃくちゃ便利ですよね！ 最近個人開発で使っていて記事の検索ページを追加したいな〜と思っていたら、全文検索機能で簡単に実装する事が出来たので、メモがてら実装例を紹介したいと思います。 前述の通り microCMS には全文検索機能があり、qパラメータにキーワードを渡すことで、簡単に検索APIを実装する事が出来ます。 クライアント側で API をリクエストすると、 APIキーが漏れてしまうリスクがある為、サーバーサイドで実行するのが一般的なやり方だと思います。 実際に公式サイトでも vercelのserverless function を利用した実装方法が紹介されています。 そこで今回は Next.js の API Routes を使った全文検索APIの実装例を紹介しようと思います。 microCMSデータの作成 最初に検索対象となるデータを作成
Next.js - Redirect to Login Page if Unauthenticated | Jason Watmore's Blog
Tutorial built with Next.js 11.1.0 This is a quick post to show how to redirect users to the login page in a Next.js front-end (React) app. The redirect applies to users that attempt to access a secure/restricted page when they are not logged in. The below components are part of a Next.js basic authentication tutorial I posted recently that includes a live demo, so to see the code running check ou
Next.js12.xのLayouts機能
この記事はNext.js 12.xのLayouts機能です。 Next.js 13.xのLayoutsについては公式を参照してください https://beta.nextjs.org/docs/routing/pages-and-layouts Next.jsのLayoutについてTypeScriptの記事を探してもあまり見つからなかったので Layoutsとは🤔 ページ間で共通のコンポーネントを定義する機能 HeaderやFooterなどはほぼ全ページ同じレイアウトを使うけど、ページコンポーネントに直接書くとコンポーネントの状態（入力値など）が保持できないのでページコンポーネントの外に書くことでレイアウトの状態も保持できる🤝 検証に使ったリポジトリ Next.jsのLayoutsを使うと何が嬉しいのか 一部共通ではないページが有る場合もページ単位でLayoutを変えられるので対応可能
StrapiとNext.jsを使って静的ウェブサイトを構築
はじめに弊社のWebサイト(https://itccorporation.jp)は、Next.js、ヘッドレスCMSのStrapiを使って、生成した静的Webサイトです。 ※用語については、下にまとめて簡単に解説があります。 図で示すと、以下のようになっています。 https://itccorporation.jpのソースコードは、GitHubにあります。(https://github.com/itc-lab/itccorporation) 今回は、このソースコードを使い、静的Webサイトを生成するところまでやっていきたいと思います。 Webサーバー（上の図で言うと一番右）のところの解説は省略します。 ・Node.jsインストール ・Strapiインストール ・Webサイトソースコードの配置 ・Strapi初期設定 ・Strapiでデータスキーマ作成 ・Strapiでデータ登録 ・Grap
Next.js で Material-UI を使う
Material-UI は、マテリアルデザインを提供する React コンポーネントライブラリです。 Material-UI のインストールMaterial-UI のコアパッケージ (@material-ui/core) は、npm コマンドで簡単にインストールできます。 マテリアルデザイン系のアイコン を使いたい場合は、@material-ui/icons パッケージもインストールしておきます。 ### yarn の場合 $ yarn add @material-ui/core $ yarn add @material-ui/icons ### npm の場合 $ npm install @material-ui/core $ npm install @material-ui/icons Next.js の create-next-app コマンドでプロジェクトを作成済みであれば、これだ
Amplify ConsoleでServer Side Renderingするチュートリアルを作った
リポジトリのセットアップ 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
What’s the best place to host Next.js site? | Kontent.ai
You’ve built your Next.js site and now you want to put it online for the world to see. Which platform is the best to host it? In this article, I’ll describe Next.js specifics when it comes to deploying and hosting, introduce the four most common steps in publishing a Jamstack website, and use them to compare the four most popular hosting providers. Next.js specifics in deployment Next.js is a Java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
GitHub - dailydotdev/apps: daily.dev application suite
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
