next extra

Next-Extra adalah paket utilitas yang memungkinkan Anda untuk meningkatkan proyek berikutnya.js Anda dengan metode tambahan yang tidak ditemukan dalam paket inti.

---

• Instalasi
• Penggunaan
  • next-extra/action
  • next-extra/context
  • next-extra/pathname
• Berkontribusi
• Lisensi

? Instalasi

npm install next-extra

Penggunaan

next-extra/action

API

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

Contoh

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

Modul ini menyediakan utilitas untuk menyampaikan data serializable dari tata letak server ke komponen halaman klien di router aplikasi berikutnya.js. Ini sangat berguna untuk berbagi data khusus konteks di seluruh aplikasi Anda tanpa perlu membuat kembali data, sehingga menghemat sumber daya komputasi dan meningkatkan kinerja.

API

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

Contoh

 // -- 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 dan searchParams dari permintaan yang masuk untuk komponen sisi server di router aplikasi.

API

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

Contoh

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

? Berkontribusi

Ingin berkontribusi? Luar biasa! Untuk menunjukkan dukungan Anda adalah membintangi proyek, atau mengangkat masalah di GitHub.

Sekali lagi terima kasih atas dukungan Anda, ini sangat dihargai!

Relevan

• Perlindungan CSRF NEXTJS

Lisensi

MIT © Shahrad Elahi