next extra

Next-Extra -это утилитный пакет, который позволяет вам улучшить ваши проекты Next.js с помощью дополнительных методов, не найденных в основном пакете.

---

• Установка
• Использование
  • next-extra/action
  • next-extra/context
  • next-extra/pathname
• Внося
• Лицензия

? Установка

npm install next-extra

Использование

next-extra/action

API

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

Пример

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

Этот модуль предоставляет утилиты для передачи последовательных данных с макета сервера к компонентам страницы клиента в маршрутизаторе Next.js App. Это особенно полезно для обмена данными для конкретного контекста в вашем приложении без необходимости повторного извлечения данных, тем самым сохраняя вычислительные ресурсы и повышая производительность.

API

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

Пример

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

Доступ pathname и searchParams входящего запроса на компоненты на стороне сервера в маршрутизаторе приложения.

API

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

Пример

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

? Внося

Хотите внести свой вклад? Потрясающий! Чтобы показать свою поддержку, значит стимулировать проект или поднять проблемы на GitHub.

Еще раз спасибо за вашу поддержку, это очень ценится!

Соответствующий

• NextJS CSRF защита

Лицензия

MIT © Shahrad Elahi