Back to results
takefumi-yoshii/nextjs-zod-gssp(opens in a new tab)
Language: TypeScript
nextjs-zod-gssp
- stars
- 9
- watchers
- 1
- forks
- 0
- open issues
- 0
- Last updated
- 12/14/2022
gem-hunterLanguage: TypeScript
nextjs-zod-gssp
Using compose function, getServerSideProps can be simplified to below example.
Combining two middleware and data fetch functions into one getServerSideProps.
export const getServerSideProps = composeGssp( // (1) Check User withUser, // (2) Validate Request withZod(z.object({ params: z.object({ postId: z.string() }) })), // (3) Fetch Data async (ctx) => ({ props: await getMyPost(ctx.params.postId) }) );
Here's a illustrate of this compose function.Since the error handler is included inside compose function, it is possible to display an Error screen or Redirect to the login screen.
Request Validation Middleware throw an exception and display an Error screen if the request parameters do not meet the expected values.Zod derives type inference from schema definitions, not just validation.The withZod middleware generated function ensures that the ctx is as defined by the Zod schema.
export const getServerSideProps = composeGssp( // (1) Check User withUser, // (2) Validate Request withZod(z.object({ params: z.object({ postId: z.string() }) })), // (3) Fetch Data: ctx.params.postId certified by Zod to be "string". async (ctx) => ({ props: await getMyPost(ctx.params.postId) }) );
ctx type inference works with the Zod schema definition.In the following example,/my/posts/[postId]?page=1 request goes through, but a request /my/posts/[postId]?page=1&page=2 does not.
export const getServerSideProps = composeGssp( // (1) Check User withUser, // (2) Validate Request withZod( z.object({ params: z.object({ postId: z.string() }), query: z.object({ page: z.string().optional() }), }) ), // (3) Fetch Data async (ctx) => ({ props: { postId: ctx.params.postId, page: ctx.query.page }, }) );
After applying the login validation middleware, the data fetch function extend ctx.user.It can be flexibly handled even in scenes where data acquisition is performed by referring to the information contained in the session.
export const getServerSideProps = composeGssp( // (1) Check User: Extending ctx with Login Validation Middleware withUser, // (2) Validate Request withZod( z.object({ params: z.object({ postId: z.string() }), query: z.object({ page: z.string().optional() }), }) ), // (3) Fetch Data async (ctx) => ({ props: { user: ctx.user.name, // ctx.user is inferred postId: ctx.params.postId, page: ctx.query.page, }, }) );
The number of Validation Middleware is unlimited, and middleware order can be changed for per page. Validation Middleware can also freely add authorization validation, referrer validation, etc., so you can respond flexibly according to requirements.
$ npm i $ docker compose up -d $ npm run dev
Go to my posts.