https://github.com/shahradelahi/next-extra
⚡ Enhance Next.js Beyond Limits
https://github.com/shahradelahi/next-extra
nextjs react typescript
Last synced: 29 days ago
JSON representation
⚡ Enhance Next.js Beyond Limits
- Host: GitHub
- URL: https://github.com/shahradelahi/next-extra
- Owner: shahradelahi
- License: mit
- Created: 2024-06-08T21:16:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-04-05T03:27:05.000Z (about 1 month ago)
- Last Synced: 2025-04-06T18:11:22.250Z (about 1 month ago)
- Topics: nextjs, react, typescript
- Language: TypeScript
- Homepage: https://npmjs.com/next-extra
- Size: 131 KB
- Stars: 481
- Watchers: 3
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Next.JS EXTRA
_next-extra_ is a utility package that allows you to enhance your Next.js projects with additional methods not found in the core package.
---
- [Installation](#-installation)
- [Usage](#-usage)
- [`next-extra/action`](#next-extraaction)
- [`next-extra/context`](#next-extracontext)
- [`next-extra/pathname`](#next-extrapathname)
- [Contributing](#-contributing)
- [Relevant](#relevant)
- [License](#license)
- [Notice of Non-Affiliation and Disclaimer](#notice-of-non-affiliation-and-disclaimer)
## 📦 Installation
```bash
npm install next-extra
```
## 📖 Usage
### `next-extra/action`
###### API
```typescript
function createAction(fn: Function): ActionFunc;
function actionError(code: string, message: string): never;
function cookies(): ResponseCookies;
function clientIP(): Promise;
```
###### Example
```typescript jsx
// -- actions.ts
'use server';
import { actionError, createAction } from 'next-extra/action';
export const hello = createAction(async (name: string) => {
if (!name) {
actionError('NAME_REQUIRED', 'Name is required');
}
return `Hello, ${name}!`;
});
```
```typescript jsx
// -- page.tsx
import { hello } from './actions';
export default async function Page() {
const { data, error } = await hello('John');
if (error) {
return
ERROR: {error.message}
;
}
return {data}
;
}
```
### `next-extra/context`
This module provides utilities for passing serializable data from the **server layout** to **client page components** in the Next.js [App Router](https://nextjs.org/docs/app). It is particularly useful for sharing context-specific data across your application without the need to re-fetch data, thereby saving computing resources and improving performance.
###### API
```typescript
function PageContext(props: PageContextProps): JSX.Element;
function usePageContext(): Readonly;
function useServerInsertedContext(): Readonly;
```
###### Example
```typescript jsx
// -- layout.tsx
import { PageContext } from 'next-extra/context';
export default async function RootLayout({ children }: { children: React.ReactNode }) {
return {children};
}
```
```typescript jsx
// -- quotes/layout.tsx
import { PageContext } from 'next-extra/context';
export default async function Layout({ children }: { children: React.ReactNode }) {
return {children};
}
```
```typescript jsx
// -- quotes/page.tsx
'use client';
import { useServerInsertedContext, usePageContext } from 'next-extra/context';
interface Context {
message: string;
}
interface InsertedContext extends Context {
ts: number;
}
export default function Page() {
const insertedCtx = useServerInsertedContext();
console.log(insertedCtx); // undefined in server or Object { ts: ..., message: "..." }
const ctx = usePageContext();
console.log(ctx); // Object { message: "..." }
return
Message: {ctx.message}
;
}
```
### `next-extra/pathname`
Access `pathname` and `searchParams` of the incoming request for server-side components in the [App Router](https://nextjs.org/docs/app).
###### API
```typescript
function pathname(): Promise;
function searchParams(): Promise;
```
###### Example
```typescript
import { pathname, searchParams } from 'next-extra/pathname';
export default async function Layout({
children,
}: Readonly<{ children: React.ReactNode }>) {
// Assuming a request to "/hello?name=John"
const route = await pathname(); // /hello
const params = await searchParams(); // ReadonlyURLSearchParams { 'name' => 'John' }
return children;
}
```
## 🤝 Contributing
Want to contribute? Awesome! To show your support is to star the project, or to raise issues on [GitHub](https://github.com/shahradelahi/next-extra).
Thanks again for your support, it is much appreciated! 🙏
## Relevant
- [NextJs CSRF Protection](https://github.com/shahradelahi/next-csrf)
## License
[MIT](/LICENSE) © [Shahrad Elahi](https://github.com/shahradelahi)
## Notice of Non-Affiliation and Disclaimer
This project, [`next-extra`](https://github.com/shahradelahi/next-extra), is an independent, community-driven project and is not affiliated with, endorsed by, or sponsored by Vercel, the creators of Next.js. Next.js is a registered trademark of Vercel, Inc.
This project utilizes the Next.js framework but is not a part of the official Next.js distribution. Any features, functionalities, or integrations provided by [`next-extra`](https://github.com/shahradelahi/next-extra) are solely the responsibility of the project maintainers and contributors. Vercel and the Next.js team hold no responsibility for the content, quality, or support of this project.
While we strive to ensure compatibility and proper functionality with Next.js, there is no guarantee of seamless integration or continued support in future Next.js releases. Use of [`next-extra`](https://github.com/shahradelahi/next-extra) is at your own discretion and risk. We recommend thoroughly testing this project in your environment before deploying it to production.
All trademarks, service marks, and registered trademarks are the property of their respective owners. The use of any third-party names or trademarks in this project is for identification purposes only and does not imply any affiliation or endorsement.