next.js の SSG は糞 - Diary
next.js の SSG は糞 ぼくは next.js 結構好きでこのブログとかも next.js で作ってるんですが、最近の next.js の方向性にはちょっと危うさを感じています。 next.js は最近は静的サイトジェネレータ+αみたいな感じになっていて、サーバーサイドジェネレーションなる機能のサポートが入っています。 でもこれどう考えてもゴミでしょ。いや記事が 500 件とかならいいけど、 50 万件あったらデプロイのたびにどんだけ時間かかる？という話で。それからサイトが生きているかぎり結局のところ記事はどんどん増えていく以上トップページは動的生成にならざるを得ないわけで。あまりはっきりと言われているわけではありませんが、 next.js を開発している人たちは WordPress のテーマを PHP で書きたくない人というペルソナをもとに開発していて、その人たちは CDN を
Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScript） import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C
https://conf2022.pwanight.jp/ で登壇したスライドです。
Next.js + Vercel + swr + TypeScript (No Redux + No SSR) で短期間チーム開発した - またのきかいに
はじめに タイトルにある通り Next.js + Vercel + swr + TypeScript という構成で短期間チーム開発をした。 以下のように特殊な状況なので色々試してみた。 開発状況 約3週間の短期間開発。 世間にリリースしない。プロトタイプを作って終了。メンテナンスもしない。 フロントエンドを触るのは自分を含めて3人。 自分・フロントの経験もあるバックエンドエンジニア・フロントエンドの経験が浅いエンジニアの3人。 ログイン機能有りのSNS的なもの。既に世の中に存在するプロダクトと似てる。 それぞれ選定理由と使用感を雑に書いていく。 Next.js github.com 環境構築が楽 Node.js環境さえ整えてもらえればすぐ動く。 ライブラリが最小限で済む Create React Appも環境構築が楽だが使われているライブラリのドキュメントを探すのが初学者には少しハードルが
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
Next.js v13 への移行でやったことまとめ 準備 基礎となる記事に目を通した -> https://zenn.dev/link/comments/eefa4975aaedaf マイグレーションガイドを見て一つずつ対応しようかなと思ったけど、記事が長いのでnext devで動かして出てきたエラーを潰していく方法にした。とりあえずビルドできるようになったら、見落としやより良いやり方があるか確認するために読む。 ページコンポーネントに対して pages にあるファイルを app ディレクトリに移動させる 規約 通りに page と layout にコンポーネントを分割する getServerSideProps の処理をasync function getData() に変更する コンポーネントを async 関数にする props ではなくコンポーネントの中でgetData()の返り値を
この記事では、GraphQL を利用したアプリを Next.js で構築していきながら、GraphQL の初歩について書いていく。 GraphQL のクライアントもサーバも、Apollo を用いる。 また、できるだけ型安全に開発したいので、graphql-codegenで型定義ファイルを生成する方法も扱う。 利用しているライブラリのバージョンは以下の通り。 @apollo/client@3.5.10 @graphql-codegen/cli@2.6.2 @graphql-codegen/typed-document-node@2.2.7 @graphql-codegen/typescript-operations@2.3.4 @graphql-codegen/typescript-resolvers@2.5.4 @graphql-codegen/typescript@2.4.7 @type
sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
しばたです。 ふとAWS謹製のCloudscapeを使ったサイトを作ってみたくなり、そのためにまずはReactとNext.jsを学んでみることにしました。 私は普段Windows環境を利用しておりWSL2上でNext.jsを実行するための環境を作ってみたのですが、これだけでも地味にハマったのでこの記事で共有したいと思います。 検証環境 本記事の内容は私の普段の開発機(Windows 10 Pro)のWSL2環境(Ubuntu 20.04)で試しています。 Ubuntu 22.04でなくて20.04なのは22.04環境を普段の業務で使っているため避けたのが理由です。本記事の内容でOS依存の部分は無いと思います。 ホスト側環境 64 bit版 Windows 10 Professional 21H1 Visual Studio Code 1.72.2をインストール済み WSL環境 Ubuntu
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
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を変えられるので対応可能
We want the default build output of Next.js to work well when self hosting, and also well on Vercel. And guess what? They're the same output. Well, almost. Let me clarify. It took us a while at Vercel to figure out the correct format and boundary between open source framework and infrastructure platform. Our philosophy is called framework defined infrastructure. And critically, the specification t
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から配信
【2024年1月】Next.js での新規アプリの構成 & Next.js ディレクトリ構成(features)
選定の方針 ログインしての利用がメインで、ユーザーがあまり多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリに集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 Next.js ライブラリ構成 メインで使っているライブラリです。Next.js + Vercelの開発体験が良すぎるので、できる限り活用して開発することを意識して作っています。 フレームワーク Next.js メインで使うライブラリ SWR tRPC React Hook Form Jotai Style/CSS に関して Vercelがリリースしたv0をいいなと思って、v0の出力で使われているTailwind CSS + shadcn/uiを使うようにしています。(v0活用は検証中です) よく使うインフラ系サービス Vercel: Gitにpus
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。 ホンダ時代に、タイプRを買っても実際にサーキットとかに走らせに行く人は1/10ぐらい、という話を聞いた気がしますが、必ずしも、そのすべてのパフォーマンスを引き出さないのはダメとかなくて、単にかっこいいからとか、一部のメリットでも自分にあえば良いのです。 Next.jsも、たくさん機能がありますが、ミニマムな使い方もできます。 ほぼNext.jsの機能をオフにした使い方たぶんNext.jsを最低限で使うライン・メリットはここかな、と思います。 基本的に全部CSR(Client Side Rend
Next.js 製 Web フロントエンドの CI ビルド時間を 1/3 にした話 - スタディサプリ Product Team Blog
こんにちは、 Web フロントエンドエンジニアの @progfay です。 今回は PR に紐づいたプレビュー環境のビルドに 10 分半かかっていたところを 3 分半ほどまでに短縮した改善活動についてお話しします。 技術改善 Day 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では「技術改善 Day」を 2 週間に 1 回実施しています。 「技術改善 Day」とは、案件開発を進めていく中で出てきた技術的負債の解消に丸 1 日チームで集中して取り組む日です。 tara 内の Web フロントエンドメンバーで解消したい技術的負債を考えたところ、その中の一つに Web フロントエンドアプリケーションのビルドに時間がかかっている問題 が挙がりました。 tara プロジェクトではデバッグや QA を効率的に行うために PR ごとに紐づいたプレビュー環境を用意しています
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
動機 開発環境・本番環境でdockerを使ってみよう！と思って試したところ何点か詰まったので備忘録としてNext.jsをdockerで環境構築する方法を記しておきます。 開発環境 公式のテンプレートをもとに作っていきます。 FROM node:18-alpine WORKDIR /app COPY package.json yarn.lock* ./ RUN if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \ fi COPY src ./src COPY public ./public COPY next.
Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
はじめに はじめまして、ユーフォリア開発部エンジニアの山本未知彦です！ このたび、ユーフォリアではJRFU(日本ラグビーフットボール協会)協力のもと、ラグビー選手の育成・強化のためのフィジカルデータベースシステムSCOTのリリースを行いました。（詳しくはこちらのプレスリリースをご覧下さい） 本記事では、SCOTのWebアプリケーション部分のアーキテクチャ紹介について、その技術選定理由と実際に開発してみて感じた良い点・気になった点をご紹介したいと思います。 SCOTのアーキテクチャ選定 まず技術選定の話をするに際して前提となるユーフォリア開発部の体制を説明します。当時、開発部にはエンジニアが２名しか在籍しておらず、SCOT開発に際しては業務委託の方々に協力いただいての開発となりました。そのため、技術選定においてはコードのレビューのしやすさと、仮にプロジェクト途中で人員の入れ替えが発生した場合
最近next.jsでいろいろアプリを作っているのですが、そのときにnextauthというライブラリで認証機能をさくっと作れることを知りまして、作ってみようと思いました。 自分のGithubのレポジトリはこちらです。 やりたいこと Next.jsでウェブアプリを作る Githubで認証できるようにする データベースにログイン情報を保存できるようにする すべて無料サービスで行う 使う技術構成 Next.js Typescript nextauth mysql Docker Prisma 使うサービス Github App Vercel Heroku ClearDB ファイル構成 tree -I node_modules . ├── README.md ├── app │ ├── LICENSE │ ├── README.md │ ├── components │ │ ├──
Next.js Commerce – Vercel
Next.js CommerceA Next.js 14 and App Router-ready ecommerce template featuring: Next.js App RouterOptimized for SEO using Next.js's MetadataReact Server Components (RSCs) and SuspenseServer Actions for mutationsEdge RuntimeNew fetching and caching paradigmsDynamic OG imagesStyling with Tailwind CSSCheckout and payments with ShopifyAutomatic light/dark mode based on system settingsNote: Looking for
Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場
Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場 クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、WebブラウザだけでNext.jsやAstroなどを実行可能にする新しいソフトウェア「Sandpack 2.0」を発表しました。 WindowsやMacなどのデスクトップPC用のWebブラウザだけでなく、iOS上のSafariでもNode.jsが実行可能。ただし現時点でのiOS版Safariへの対応は、メモリリークなどが発生するためβ版だと説明されています。 先週、StackBlitzからはWebブラウザ上で実行できるWe
最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe
【30歳/完全未経験/独学】webアプリを作製しました【Golang, Next.js, MySQL, Docker, GitHub Actions CI, AWS Fargate on ECS】 - Qiita
完成物 ER図 画面遷移図 figma, 原寸画像 AWS構成図 ※備考※ GitHub Actions CIは構築済みです。 GitHub Actions CD, apiのprivate subnet化にも取り組んでいます。 EC2インタンスは通常時停止です。 技術選定理由 プログラミング、IT業界ともに未経験で着手し独学で作りました。 Go 比較対象：JAVA、Ruby、Python、PHP コンパイラ言語であり実行速度が高速である 静的型付けであり、コンパイル前にバグを発見しやすい 静的型付けかつ記述自由度が低いことから、以下２点を利点と考えた 開発を中長期まで続けた際にも、加筆・改修しやすい 他人のコードを読んだ際に学びやすい Javaも多少書いてみたが、簡素にかけるGoの方がしっくりきた SHOWROOM、IRIAM、Twitch、AbemaTVといった動画配信サービスにも採用さ
Next.js Database with Prisma | Next-Generation ORM for SQL Databases
Next.js blurs the lines between client and server. It supports pre-rendering pages at build time (SSG) or request time (SSR). Prisma is the perfect companion if you need to work with a database in a Next.js app. You can decide whether to access your database with Prisma at build time (getStaticProps), at request time (getServersideProps), using API routes, or by entirely separating the backend out
SPA に移行しづらいシステムたちレンダリングの移り変わりCSR を有効活用しづらい事業領域App Directory によって Next.js は他と対等な選択肢になりうるServer Component がデフォルトの世界React のエコシステムの恩恵を受けられるようになるどういうアーキテクチャになるか1. モノリスから Frontend サーバを分離する2. 元々あった Frontend サーバーをリプレイスする3. SPA + BFF を１つの Next.js サーバーにするまとめこんにちは、@p1assです。 最近、Next.js 13 から beta で導入されている App Directory を趣味で触っているのですが、今まで SPA を採用しづらかった事業領域でも React のエコシステムを使えるようになりそうな予感がして、ワクワクしています。 このブログでは、今まで
To take a look at how rewrites look using regex or wildcard paths, take a look at this next.config.js file. Tip 3: Next.js Preview ModePreview Mode allows you to see a draft of your statically-generated content prior to publishing it to the web. Next.js has the ability to generate these draft pages at request time instead of build time so that developers can see what their content will look like w
フロントエンドアプリケーションの開発を行う上で避けては通れないデータフェッチの実装。 REST APIを使うか、GraphQLを使うか、クライアントでキャッシュするか、APIレスポンスにどのようにして型を付けるか、状態管理はどうするのかなど、開発者の悩みが尽きないけれども、それに関しての設計を考えたり議論を行うのはフロントエンド開発の楽しいポイントだと僕は思っています。 この記事では、バックエンドにHasura、フロントエンドにNext.jsを使用する場合に僕が最強だと感じたツールの組み合わせ・使い方を紹介します。 モチベーション APIからのレスポンスにはTypeScriptの型が勝手についてきてほしい。asで型アサーションするのはやりたくない。 クライアントでもサーバー（SSR）でもデータフェッチの方法が同じインターフェースで提供されてほしい。 クライアントでAPIレスポンスをキャッシ
はじめに この記事は、筆者がOOPartsというプロダクトにおいて、Reactのアプリを 「Create React App」 から 「Next.js」 に置き換えた事例を記す内容となっています。 これまで 「0からのNext.jsアプリケーションの作成」 文脈における記事は多くありましたが、「Create React App」から「Next.js」という、 同じReact環境における移行記事 はそこまで多くなかったと認識しています。 ある程度育ちきっているプロダクトであれば、フレームワークごと移行することは中々困難になると思っていますし、それを成し遂げることはとてもチャレンジングなことです。その結果、事例としての大規模移行事例は中々存在しませんし、稀有なことだと思っています。 本記事におけるOOPartsのNext.js移行に関する知見は、今後大きな移行する人たちの参考になれば良いと思っ
Next.js 14
As we announced at Next.js Conf, Next.js 14 is our most focused release with: Turbopack: 5,000 tests passing for App & Pages Router 53% faster local server startup 94% faster code updates with Fast Refresh Server Actions (Stable): Progressively enhanced mutations Integrated with caching & revalidating Simple function calls, or works natively with forms Partial Prerendering (Preview): Fast initial
クイックサマリー ‐ 国際化ルーティングは、厳密にはNext.jsの新機能ではありません。（v.10以降搭載されています。）この記事では、この機能のメリットだけではなく、こうした機能を利用して最高のユーザ体験と円滑な開発者体験を実現する方法についても見ていきます。自己文書化コードやバンドルサイズの削減、さらにはランタイムエラーではなくコンパイル時エラーに興味のある方は、是非このまま読み進めてください。 開発中のアプリにおいて、ロケール（または国、あるいは両方）ごとにルートを設定したい場合、Next.jsで簡単に対応できるようになりました。プロジェクトのrootディレクトリにnext.config.jsがない場合、新たに作成してください。このスニペットからコピーしても構いません。 /** @type {import('next').NextConfig} */ module.exports
公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜 | DevelopersIO
公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜 こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、現在注目されているフロントエンドフレームワークNext.jsへの入門のために、次の公式チュートリアルを数回のシリーズに分けてこなしていき、基本的な機能に触れていこうと思います。 Create a Next.js App | Learn Next.js Next.jsとは Next.jsは、オープンソースで提供されるReactベースのフロントエンドフレームワークです。 Next.js by Vercel - The React Framework こちらによるとNext.jsの特徴は次のようなものがあり、プロダクション環境で必要とされるあらゆる機能と、最高の開発者エクスペリエンスを提供できるように設計されています。 An int
概要 Spotify APIの楽曲レコメンド機能を使って、DJ Mix用のプレイリストを作成できるWebアプリケーションを開発しました。まずはそのアプリケーションの内容をご紹介します。 実装はTypeScript + Next.jsで行いVercelにデプロイする形にしたところ、非常に高い開発体験が得られました。後半はSpotify APIの使い方を含めて、Next.jsでの実装やVercel上での設定について書いていきます。 できたもの AUTOMISCE - Automate Your Mix with Spotify API 使い方 まず"Sign in with Spotify"ボタンでSpotifyにログインします。次に右側の検索欄で最初の曲を選んでプレイリストに追加します。するとその曲と似たテンポでかつテンション感が少し上の曲が"Upper Tracks"欄に、少し下の曲が"D
Next.js 9.2 から CSS Modules がビルトインサポート対象になった。 CSS最適化に関して、組み込みサポートのレールから逸れると、ページ単位で最適化された静的CSSの生成不全に陥る。少しでもパフォーマンスの良い Next.js App を構築したいのなら、CSS Modules 一択というのが現状で、CSS in JS に慣れ親しんだ身からすると正直辛い現実だ。 CSS in JS よりも CSS Modules の方が、ロードタイム・ランタイムともに、パフォーマンス面で有利なことは知られている。こちらのベンチマークテストが参考になる。 しかし、本来であるなら皆 CSS in JS を使いたいのではないか。あえてレガシーな CSS Modules 推奨とする理由は、CSS という難儀な仕組みを乗り越えるため、技術的に「そうせざるを得ない」理由が他にもあるのではないか。真
管理画面を作るフレームワークrefineを使って、Next.jsで管理画面を作ってみた | DevelopersIO
管理画面って作るのめんどくさくないですか？そんなわけでrefineを使ってみました。 refineは、管理画面を作成するためのReactベースのフレームワークです。refineを使ってNext.jsな管理画面を作ってみました。 管理画面って作るのめんどくさくないですか？ 管理画面は一般的に、データのCRUD（Create, Read, Update, Delete）が行えるデータの管理画面として使われることが多いです。 そうすると、一覧画面があって、データの登録画面があって、データの編集画面があって、データの削除画面があって、データの詳細画面があって…、という感じで大体似たような画面を作ることになります。 そういった手間を軽減するために、refine を試してみました。 refine は、管理画面を作成するためのReactベースのフレームワークです。 refine | Open-sourc
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション（OOUIの考え方を取り入れたら画面数が減りました） 基本的にバック
Next.jsでv12〜middlewareという機能が使えるようになりました。 middlewareに書いた処理はリクエストが完了する前に実行されます。Cookieの値に応じてルーティングを振り分けたり、Basic認証を導入したり等など、幅広い用途で使えそうです。 VercelとNext.jsの組み合わせが強いのは、VercelにNext.jsをデプロイするとこのmiddleware部分をEdge Functionsで捌いてくれるという点です。つまり、静的なページに対するリクエストに対して、オリジンサーバーに触れことなくmiddlewareを実行できるということです。 Vercel以外のプラットフォームだとどうなのか ドキュメントには以下のような記載があります。 This works out of the box using next start, as well as on Edge
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsでページ共通の処理をする（useEffectを使う例）
Next.jsチョットデキル！サイトの規模やページ特性に合わせた開発テクニック
個人ブログの Next.js v13 移行でやったことまとめ
Next.js で始める GraphQL - 30歳からのプログラミング
Next.js Cacheのアツさをシェアしたい(App Router)
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
WSL2環境でNext.jsに入門してみた | DevelopersIO
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
Why I'm Using Next.js
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法
管理画面等でNext.jsをBetter Reactとして使う | フューチャー技術ブログ
Next.jsの本番環境・開発環境をdockerで構築する方法 - Qiita
Next.js + NestJS で新サービスを作った話 | EUPHORIA DEV BLOG
無償版PaaSだけでGithubでログインするNext.jsアプリを作る - Qiita
Next.jsのISRで動的コンテンツをキャッシュするときの戦略
バックエンドエンジニアがNext.jsのApp Directoryに夢を見る - ぷらすのブログ
10 Next.js tips you might not know – Vercel
ぼくのかんがえたさいきょうのデータフェッチ 2021Summer🏄♂️【Next.js / Hasura】
Create React AppからNext.jsへの移行事例紹介
Next.jsアプリのローカライゼーション | POSTD
Spotify API + Next.jsで作る選曲支援Webアプリ - Qiita
Next.js が CSS Modules を推奨する真相に迫りたい
Next.jsのmiddlewareはVercel以外でも問題なく使えるか