^{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
- Usage
- next-extra/action
- next-extra/context
- next-extra/pathname
- Contributing
- Relevant
- License

📦 Installation

``bash
npm install next-extra
`

📖 Usage

$3

###### 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}

;
}
`

$3

This module provides utilities for passing serializable data from the server layout to client page components in the Next.js App Router. 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}

;
}
`

$3

Access pathname and searchParams of the incoming request for server-side components in the App Router.

###### 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.

Thanks again for your support, it is much appreciated! 🙏

Relevant

- next-csrf: CSRF protection middleware for Next.Js
- next-zod-route: Zod-safe routes for Next.Js App Directory

License

MIT © Shahrad Elahi and contributors.

Notice of Non-Affiliation and Disclaimer

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 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` is at your own discretion and risk. We recommend thoroughly testing this project in your environment before deploying it to production.