https://github.com/skn437/skn-next-types
A Simple Type Definition Extension Library For Next.js 14
https://github.com/skn437/skn-next-types
bun library nextjs nodejs react types typescript
Last synced: 5 months ago
JSON representation
A Simple Type Definition Extension Library For Next.js 14
- Host: GitHub
- URL: https://github.com/skn437/skn-next-types
- Owner: skn437
- License: mit
- Created: 2024-06-09T18:34:56.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-16T05:05:24.000Z (almost 2 years ago)
- Last Synced: 2025-07-01T08:54:29.641Z (about 1 year ago)
- Topics: bun, library, nextjs, nodejs, react, types, typescript
- Language: Shell
- Homepage:
- Size: 43 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SKN Next.js Type Extension Library
> TypeScript Next.js
[](https://www.npmjs.com/package/@best-skn/next-types) [](https://opensource.org/license/mit)
## **_Introduction:_**
### This is a simple TypeScript Type Extension Library for Next.js 14
### 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
## **_Details:_**
### **`ParamProps` Type**
- An interface taking a generic that has `params` property of type `Record`
- `ParamProps` is the prop type for Next.js dynamic route `page.tsx` default exported server component.
- `ParamProps` generic type is actually a string which is the name of the slug i.e. the name of the dynamic id
- The dynamic id can have names like: "slug", "id" etc. which becomes the directory name like: [slug], [id] etc
- For usage instruction, see `Usage` section
### **`GenerateMetadata` Type**
- `GenerateMetadata` is the type for Next.js dynamic route `generateMetadata` function
- The generic type which is the dynamic id, must match that of `ParamProps` in a certain dynamic route component
- For usage instruction, see `Usage` section
### **`GenerateStaticParams` Type**
- `GenerateStaticParams` is the type for Next.js dynamic route `generateStaticParams` function
- The generic type which is the dynamic id, must match that of `ParamProps` in a certain dynamic route component
- For usage instruction, see `Usage` section
### **`NextErrorProps` Type**
- an interface for Next.js `error.tsx` client component
- `NextErrorProps` is the prop type for `error.tsx` default exported function
## **_Use Case:_**
- Next.js
## **_Requirements:_**
### This library has peer dependency for React & React DOM of minimum 18.3.1. It may or may not work on 19.x
### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x
- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`
- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`
- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`
- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`
- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`
## **_Complementary Libraries:_**
- [@best-skn/react-types](https://www.npmjs.com/package/@best-skn/react-types)
## **_Usage:_**
### To install the package, type the following in console
> ```zsh
> npm add -D @best-skn/next-types
> #or
> yarn add -D @best-skn/next-types
> #or
> pnpm add -D @best-skn/next-types
> #or
> bun add -D @best-skn/next-types
> ```
### Create a directory called `types` in the root location of your project, and create a file called `next.d.ts`, then do this
> ```typescript
> import "@best-skn/next-types";
> ```
### Check your `tsconfig.json`, if `includes` property has `**/*.ts` & `**/*.tsx` or not otherwise the type definition file may not work
### Now Inside your Next.js 14 Project, use the package like this (Just an example)
#### **_`ParamProps`, `GenerateMetadata` & `GenerateStaticParams` Types:_**
#### For any dynamic routes, use like this
> ```typescript jsx
> // Location: app/users/[slug]/page.tsx
> // Dynamic id: slug
> import type {
> GenerateMetadata,
> GenerateStaticParams,
> ParamProps,
> } from "next";
>
> // Generic type here `slug` as the dynamic id is that
> export const generateMetadata: GenerateMetadata<"slug"> = async (props) => {
> const { slug } = props.params;
> // some codes here...
> return {
> // some codes here...
> };
> };
>
> // Generic type here `slug` as the dynamic id is that
> export const generateStaticParams: GenerateStaticParams<"slug"> = async () => {
> // your code for generating static params here...
> // you'll get type safe dynamic route: `slug`
> };
>
> // Generic type here `slug` as the dynamic id is that
> // here `React.SC` type is from my another package: `@best-skn/react-types`
> const User: React.SC> = async (props) => {
> const { slug } = props.params; // you'll get a type safe dynamic id name
>
> return ();
> };
>
> ```
#### **_`NextErrorProps` Type:_**
#### For `error.tsx` files, use like this
> ```typescript jsx
> "use client";
>
> import type { NextErrorProps } from "next";
>
> const Error: React.FC = (props) => {
> const { error, reset } = props;
> // some codes here...
> return (
>
something...
> );
> };
> ```
## **_Dedicated To:_**
- 👩🎨`Prodipta Das Logno` & 🧛♀️`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.
- 💯`My Parents`: The greatest treasures of my life ever.
## **_License:_**
Copyright (C) 2024 SKN Shukhan
Licensed under the MIT License