Next.js の Zod 活用術

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

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

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を利用する... 続きを読む