Next.js の Zod 活用術

2022/12/14 16 users Zenn Zod Tips バリデーションライブラリ 本稿

本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバ... 続きを読む

Next.js に Service層 を導入する

2022/06/03 9 users Next.js backend SPA しない 本稿

本稿は、Next.js で「getServerSideProps や API Routes」を利用するアプリケーション向け内容になります。重厚な作りになるので、要件に適合する・しないはあると思いますので、あしからず。 Next.js は薄いフレームワーク Next.js は SPA 配信の最適化にフォーカスしており、Backend の機能面が十分とは言えません。pa... 続きを読む

Testing Next.js - getServerSideProps & API Routes -

2022/05/11 8 users Jest 本稿 API Routes Next.js テスト

Next.js の getServerSideProps & API Routes テスト手法についてまとめました。getServerSidePorps & API Routes に関するテストは「Cypress・Playwright」を利用することが多いと思いますが、本稿は Jest 単体テストの紹介です。 Ecosystem Dependencies テストに使用するエコシステム一式です（Jest 等は略） msw nod... 続きを読む

Next.jsでSSRを限界まで簡単に実現する

2021/09/24 13 users SSR getInitialProps Next.js 限界

１．getInitialPropsの終焉 1.1. Next.jsではgetInitialPropsのSSRが終わったことにされている Next.jsの9.3以降、getStaticPropsやgetServerSidePropsが登場し、現在ではgetInitialPropsを使ったSSRが終焉を迎えたかのような風潮となっています。しかしgetStaticPropsとgetServerSidePropsは、実際の所で大きな欠点を抱... 続きを読む

Next.js API Route の実装時に同じファイルでクライアントコードも実装すると嬉しい…

2021/01/08 23 users pages ROUTE Prisma クライ ユニバーサル

tl;dr API Route でクライアント用のコードも一緒に実装すると型安全に実装しやすい ただしセキュリティは気をつけてね 発想 Next.js から Prisma ORM を利用する という記事で、 Next.js の getServerSideProps で prisma のコードを使う例を紹介しました。 これは pages というユニバーサルなエンドポイントで、クライ... 続きを読む

2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した

2020/12/05 298 users Next.js 全部 TypeScript バス 使い勝手

この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手... 続きを読む

Next.js の状態管理 2020

2020/10/30 184 users Next.js 状態管理 SSG JamStack 花形

Next.js といえば、SSG（JAMstack）が最近は特に花形ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が関心ごとの中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなく、getServerSidePropsを使用することが推奨されています。getStaticPropsやgetServerSidePropsを利用する... 続きを読む

Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita

2020/03/15 6 users Qiita React ZEIT Issue SSR

はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js Next.jsが未経験の方でもReactとSSR(Server Side Render... 続きを読む