^{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 (Deprecated)
  • next-extra/context
  • next-extra/pathname
• Contributing
• Relevant
• License

📦 Installation

npm install next-extra

📖 Usage

next-extra/action (Deprecated)

⚠️ DEPRECATED: The next-extra/action module is deprecated and will be removed in the next major release. We highly recommend using next-zod-action for building type-safe, middleware-supported Next.js Server Actions.

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

• next-zod-action: Type-safe, builder-pattern interface for Next.js Server Actions
• next-csrf: CSRF protection middleware for Next.Js

License

MIT © Shahrad Elahi and contributors.