next extra

Next-Extra ist ein Dienstprogrammpaket, mit dem Sie Ihre nächsten.JS-Projekte mit zusätzlichen Methoden verbessern können, die nicht im Kernpaket enthalten sind.

---

• Installation
• Verwendung
  • next-extra/action
  • next-extra/context
  • next-extra/pathname
• Beitragen
• Lizenz

? Installation

npm install next-extra

Verwendung

next-extra/action

API

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

Beispiel

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

Dieses Modul enthält Dienstprogramme für das Übergeben von serialisierbaren Daten aus dem Serverlayout an Client -Seitenkomponenten im nächsten.js App -Router. Es ist besonders nützlich, um kontextspezifische Daten in Ihrer Anwendung zu teilen, ohne dass Daten neu abgeholt werden müssen, wodurch Computerressourcen gespeichert und die Leistung verbessert werden müssen.

API

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

Beispiel

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

Zugriff auf pathname und searchParams der eingehenden Anforderung für serverseitige Komponenten im App-Router.

API

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

Beispiel

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

? Beitragen

Willst du einen Beitrag leisten? Eindrucksvoll! Ihre Unterstützung zu zeigen, bedeutet, das Projekt zu spielen oder Probleme auf Github zu lenken.

Nochmals vielen Dank für Ihre Unterstützung, es wird sehr geschätzt!

Relevant

• NEXTJS CSRF -Schutz

Lizenz

Mit © Shahrad Elahi