next extra 다운로드 - next extra 소스 코드 다운로드

next extra

AI 소스 코드

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`

이 모듈은 서버 레이아웃 에서 클라이언트 페이지 구성 요소 로 Serializable 데이터를 전달하기위한 유틸리티를 제공합니다. 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 앱 라우터에서 서버 측 구성 요소에 대한 수신 요청에 대한 SearchParam.

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