next extra下載 - next extra源代碼下載

next extra

Ai源碼

v0.6.1

下載

Next-Extra是一個實用程序軟件包，它允許您使用Core軟件包中未找到的其他方法來增強下一個項目。

安裝
用法
- 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應用程序路由器中客戶端頁面組件的實用程序。它對於在您的應用程序上共享特定於上下文的數據特別有用，而無需重新填寫數據，從而節省計算資源並提高性能。

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