^{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
• Notice of Non-Affiliation and Disclaimer

📦 Installation

npm install next-extra

📖 Usage

next-extra/action

API

function createAction(fn: Function): ActionFunc;
function actionError(code: string, message: string): never;
function cookies(): ResponseCookies;
function clientIP(): Promise<string | null>;

Example

// -- 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}!`;
});

// -- page.tsx
import { hello } from './actions';

export default async function Page() {
  const { data, error } = await hello('John');
  if (error) {
    return <h1>ERROR: {error.message}</h1>;
  }
  return <h1>{data}</h1>;
}

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

function PageContext<T>(props: PageContextProps<T>): JSX.Element;
function usePageContext<T>(): Readonly<T>;
function useServerInsertedContext<T>(): Readonly<T | undefined>;

Example

// -- layout.tsx
import { PageContext } from 'next-extra/context';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return <PageContext data={{ ts: Date.now() }}>{children}</PageContext>;
}

// -- quotes/layout.tsx
import { PageContext } from 'next-extra/context';

export default async function Layout({ children }: { children: React.ReactNode }) {
  return <PageContext data={{ quote: 'Guillermo Rauch is a handsome dude!' }}>{children}</PageContext>;
}

// -- 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<InsertedContext>();
  console.log(insertedCtx); // undefined in server or Object { ts: ..., message: "..." }

  const ctx = usePageContext<Context>();
  console.log(ctx); // Object { message: "..." }

  return <h3>Message: {ctx.message}</h3>;
}

next-extra/pathname

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

API

function pathname(): Promise<string>;
function searchParams(): Promise<ReadonlyURLSearchParams>;

Example

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

• NextJs CSRF Protection

License

MIT © Shahrad Elahi

Notice of Non-Affiliation and Disclaimer

This project, 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 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 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.