{"id":21646606,"url":"https://github.com/skn437/skn-next-types","last_synced_at":"2026-02-13T08:43:21.051Z","repository":{"id":243614717,"uuid":"812739347","full_name":"skn437/skn-next-types","owner":"skn437","description":"A Simple Type Definition Extension Library For Next.js 14","archived":false,"fork":false,"pushed_at":"2024-09-16T05:05:24.000Z","size":44,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-01T08:54:29.641Z","etag":null,"topics":["bun","library","nextjs","nodejs","react","types","typescript"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skn437.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-09T18:34:56.000Z","updated_at":"2024-08-18T19:28:02.000Z","dependencies_parsed_at":"2024-06-10T08:00:22.774Z","dependency_job_id":"e529bbe5-2c3c-49a7-a986-fb8fec851fdf","html_url":"https://github.com/skn437/skn-next-types","commit_stats":null,"previous_names":["skn437/skn-next-types"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/skn437/skn-next-types","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skn437","download_url":"https://codeload.github.com/skn437/skn-next-types/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-types/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265645282,"owners_count":23804183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","library","nextjs","nodejs","react","types","typescript"],"created_at":"2024-11-25T06:45:51.035Z","updated_at":"2026-02-13T08:43:21.035Z","avatar_url":"https://github.com/skn437.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SKN Next.js Type Extension Library\n\n\u003cimg width=\"150px\" src=\"https://firebasestorage.googleapis.com/v0/b/skn-ultimate-project-la437.appspot.com/o/GitHub%20Library%2F09-TypeScript-SNT.svg?alt=media\u0026token=779098df-3836-4a06-b568-31027db5c644\" alt=\"nextjs\" /\u003e\n\n\u003e TypeScript Next.js\n\n[![NPM Version](https://img.shields.io/npm/v/%40best-skn%2Fnext-types)](https://www.npmjs.com/package/@best-skn/next-types) [![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/license/mit)\n\n\u0026nbsp;\n\n## **_Introduction:_**\n\n### This is a simple TypeScript Type Extension Library for Next.js 14\n\n### I made this library so that I can use it in all of my Next.js 14 projects without writing the same codes over and over again\n\n\u0026nbsp;\n\n## **_Details:_**\n\n### **`ParamProps` Type**\n\n- An interface taking a generic that has `params` property of type `Record\u003cT, string\u003e`\n- `ParamProps` is the prop type for Next.js dynamic route `page.tsx` default exported server component.\n- `ParamProps` generic type is actually a string which is the name of the slug i.e. the name of the dynamic id\n- The dynamic id can have names like: \"slug\", \"id\" etc. which becomes the directory name like: [slug], [id] etc\n- For usage instruction, see `Usage` section\n\n### **`GenerateMetadata` Type**\n\n- `GenerateMetadata` is the type for Next.js dynamic route `generateMetadata` function\n- The generic type which is the dynamic id, must match that of `ParamProps` in a certain dynamic route component\n- For usage instruction, see `Usage` section\n\n### **`GenerateStaticParams` Type**\n\n- `GenerateStaticParams` is the type for Next.js dynamic route `generateStaticParams` function\n- The generic type which is the dynamic id, must match that of `ParamProps` in a certain dynamic route component\n- For usage instruction, see `Usage` section\n\n### **`NextErrorProps` Type**\n\n- an interface for Next.js `error.tsx` client component\n- `NextErrorProps` is the prop type for `error.tsx` default exported function\n\n\u0026nbsp;\n\n## **_Use Case:_**\n\n- Next.js\n\n\u0026nbsp;\n\n## **_Requirements:_**\n\n### This library has peer dependency for React \u0026 React DOM of minimum 18.3.1. It may or may not work on 19.x\n\n### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x\n\n- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`\n- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`\n- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`\n- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`\n- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`\n\n\u0026nbsp;\n\n## **_Complementary Libraries:_**\n\n- [@best-skn/react-types](https://www.npmjs.com/package/@best-skn/react-types)\n\n\u0026nbsp;\n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n\u003e ```zsh\n\u003e npm add -D @best-skn/next-types\n\u003e #or\n\u003e yarn add -D @best-skn/next-types\n\u003e #or\n\u003e pnpm add -D @best-skn/next-types\n\u003e #or\n\u003e bun add -D @best-skn/next-types\n\u003e ```\n\n### Create a directory called `types` in the root location of your project, and create a file called `next.d.ts`, then do this\n\n\u003e ```typescript\n\u003e import \"@best-skn/next-types\";\n\u003e ```\n\n### Check your `tsconfig.json`, if `includes` property has `**/*.ts` \u0026 `**/*.tsx` or not otherwise the type definition file may not work\n\n### Now Inside your Next.js 14 Project, use the package like this (Just an example)\n\n#### **_`ParamProps`, `GenerateMetadata` \u0026 `GenerateStaticParams` Types:_**\n\n#### For any dynamic routes, use like this\n\n\u003e ```typescript jsx\n\u003e // Location: app/users/[slug]/page.tsx\n\u003e // Dynamic id: slug\n\u003e import type {\n\u003e   GenerateMetadata,\n\u003e   GenerateStaticParams,\n\u003e   ParamProps,\n\u003e } from \"next\";\n\u003e\n\u003e // Generic type here `slug` as the dynamic id is that\n\u003e export const generateMetadata: GenerateMetadata\u003c\"slug\"\u003e = async (props) =\u003e {\n\u003e   const { slug } = props.params;\n\u003e   // some codes here...\n\u003e   return {\n\u003e     // some codes here...\n\u003e   };\n\u003e };\n\u003e\n\u003e // Generic type here `slug` as the dynamic id is that\n\u003e export const generateStaticParams: GenerateStaticParams\u003c\"slug\"\u003e = async () =\u003e {\n\u003e   // your code for generating static params here...\n\u003e   // you'll get type safe dynamic route: `slug`\n\u003e };\n\u003e\n\u003e // Generic type here `slug` as the dynamic id is that\n\u003e // here `React.SC` type is from my another package: `@best-skn/react-types`\n\u003e const User: React.SC\u003cParamProps\u003c\"slug\"\u003e\u003e = async (props) =\u003e {\n\u003e   const { slug } = props.params; // you'll get a type safe dynamic id name\n\u003e\n\u003e   return ();\n\u003e };\n\u003e\n\u003e ```\n\n#### **_`NextErrorProps` Type:_**\n\n#### For `error.tsx` files, use like this\n\n\u003e ```typescript jsx\n\u003e \"use client\";\n\u003e\n\u003e import type { NextErrorProps } from \"next\";\n\u003e\n\u003e const Error: React.FC\u003cNextErrorProps\u003e = (props) =\u003e {\n\u003e   const { error, reset } = props;\n\u003e   // some codes here...\n\u003e   return (\n\u003e     \u003cdiv\u003esomething...\u003c/div\u003e\n\u003e   );\n\u003e };\n\u003e ```\n\n\u0026nbsp;\n\n## **_Dedicated To:_**\n\n- 👩‍🎨`Prodipta Das Logno` \u0026 🧛‍♀️`Atoshi Sarker Prithula`: The two most special ladies of my life. My best wishes will always be with you two. May you two always be happy.\n- 💯`My Parents`: The greatest treasures of my life ever.\n\n\u0026nbsp;\n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-next-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskn437%2Fskn-next-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-next-types/lists"}