next-extra

^{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

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

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