next extra

O Next-Extra é um pacote de utilitário que permite aprimorar seus projetos próximos.js com métodos adicionais não encontrados no pacote principal.

---

• Instalação
• Uso
  • next-extra/action
  • next-extra/context
  • next-extra/pathname
• Contribuindo
• Licença

? Instalação

npm install next-extra

Uso

next-extra/action

API

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

Exemplo

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

Este módulo fornece utilitários para passar dados serializáveis do layout do servidor para os componentes da página do cliente no roteador App Next.js.js. É particularmente útil para compartilhar dados específicos do contexto em seu aplicativo sem a necessidade de re-buscar dados, salvando assim os recursos de computação e melhorando o desempenho.

API

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

Exemplo

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

Acesse pathname e searchParams da solicitação de entrada de componentes do lado do servidor no roteador de aplicativos.

API

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

Exemplo

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

? Contribuindo

Quer contribuir? Incrível! Mostrar seu apoio é estrelar o projeto ou levantar questões no Github.

Mais uma vez obrigado pelo seu apoio, é muito apreciado!

Relevante

• Próxima Proteção de CSRF

Licença

Mit © Shahrad Elahi