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)
## 📦 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
- [next-csrf](https://github.com/shahradelahi/next-csrf): CSRF protection middleware for Next.Js
- [next-zod-route](https://github.com/Melvynx/next-zod-route): Zod-safe routes for Next.Js App Directory
## License
[MIT](/LICENSE) © [Shahrad Elahi](https://github.com/shahradelahi) and [contributors](https://github.com/shahradelahi/next-extra/graphs/contributors).
## Notice of Non-Affiliation and Disclaimer
[`next-extra`](https://github.com/shahradelahi/next-extra), is an independent project created by the community and is not affiliated with, endorsed, 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.
While we strive to ensure compatibility and proper functionality with Next.js, breaking changes can occur. We actively maintain this package for the latest versions of Next.js, which may require dropping support for older versions over time. 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.