تنزيل next extra - تنزيل رمز المصدر next extra

next extra

كود الذكاء الاصطناعي

v0.6.1

تنزيل

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. إنه مفيد بشكل خاص لمشاركة البيانات الخاصة بالسياق عبر التطبيق الخاص بك دون الحاجة إلى إعادة إحضار البيانات ، وبالتالي توفير موارد الحوسبة وتحسين الأداء.

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`

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