Nitro

Nuxt Kit은 Nitro와 함께 작업할 수 있도록 돕는 유틸리티 세트를 제공합니다. 이 함수들은 서버 핸들러, 플러그인, 그리고 프리렌더 경로를 추가할 수 있게 해줍니다.

Nitro는 초고속 웹 서버를 구축하기 위한 오픈 소스 TypeScript 프레임워크입니다. Nuxt는 Nitro를 서버 엔진으로 사용합니다. useNitro를 사용하여 Nitro 인스턴스에 접근할 수 있으며, addServerHandler를 사용하여 서버 핸들러를 추가하고, addDevServerHandler를 사용하여 개발 모드에서만 사용할 서버 핸들러를 추가하며, addServerPlugin을 사용하여 Nitro의 런타임 동작을 확장하는 플러그인을 추가하고, addPrerenderRoutes를 사용하여 Nitro에 의해 프리렌더될 경로를 추가할 수 있습니다.

`addServerHandler`

Nitro 서버 핸들러를 추가합니다. 서버 미들웨어나 커스텀 경로를 만들고 싶을 때 사용하세요.

사용법

import { createResolver, defineNuxtModule, addServerHandler } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options) {
    const { resolve } = createResolver(import.meta.url)

    addServerHandler({
      route: '/robots.txt',
      handler: resolve('./runtime/robots.get')
    })
  }
})

타입

function addServerHandler (handler: NitroEventHandler): void

매개변수

handler: 다음 속성을 가진 핸들러 객체:

속성	타입	필수	설명
`handler`	`string`	`true`	이벤트 핸들러의 경로.
`route`	`string`	`false`	경로 접두사 또는 경로. 빈 문자열이 사용되면 미들웨어로 사용됩니다.
`middleware`	`boolean`	`false`	이것이 미들웨어 핸들러임을 지정합니다. 미들웨어는 모든 경로에서 호출되며, 다음 핸들러로 전달하기 위해 일반적으로 아무것도 반환하지 않아야 합니다.
`lazy`	`boolean`	`false`	핸들러를 임포트할 때 지연 로딩을 사용합니다. 이는 핸들러를 필요할 때만 로드하고 싶을 때 유용합니다.
`method`	`string`	`false`	라우터 메소드 매처. 핸들러 이름에 메소드 이름이 포함되어 있으면 기본값으로 사용됩니다.

예제

기본 사용법

addServerHandler를 사용하여 모듈에서 서버 핸들러를 추가할 수 있습니다.

import { createResolver, defineNuxtModule, addServerHandler } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options) {
    const { resolve } = createResolver(import.meta.url)

    addServerHandler({
      route: '/robots.txt',
      handler: resolve('./runtime/robots.get')
    })
  }
})

/robots.txt에 접근하면 다음과 같은 응답을 반환합니다:

User-agent: *
Disallow: /

`addDevServerHandler`

개발 모드에서만 사용할 Nitro 서버 핸들러를 추가합니다. 이 핸들러는 프로덕션 빌드에서 제외됩니다.

사용법

import { defineEventHandler } from 'h3'
import { createResolver, defineNuxtModule, addDevServerHandler } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    addDevServerHandler({
      handler: defineEventHandler(() => {
        return {
          body: `Response generated at ${new Date().toISOString()}`
        }
      }),
      route: '/_handler'
    })
  }
})

타입

// @errors: 2391
import type { NitroDevEventHandler } from 'nitropack'
// ---cut---
function addDevServerHandler (handler: NitroDevEventHandler): void

매개변수

handler: 다음 속성을 가진 핸들러 객체:

속성	타입	필수	설명
`handler`	`EventHandler`	`true`	이벤트 핸들러.
`route`	`string`	`false`	경로 접두사 또는 경로. 빈 문자열이 사용되면 미들웨어로 사용됩니다.

예제

기본 사용법

일부 경우에는 개발 목적으로 서버 핸들러를 생성하고 싶을 수 있습니다. 예를 들어 Tailwind 설정 뷰어 같은 경우입니다.

import { joinURL } from 'ufo'
import { defineNuxtModule, addDevServerHandler } from '@nuxt/kit'

export default defineNuxtModule({
  async setup(options, nuxt) {
    const route = joinURL(nuxt.options.app?.baseURL, '/_tailwind')

    // @ts-ignore
    const createServer = await import('tailwind-config-viewer/server/index.js').then(r => r.default || r) as any
    const viewerDevMiddleware = createServer({ tailwindConfigProvider: () => options, routerPrefix: route }).asMiddleware()

    addDevServerHandler({ route, handler: viewerDevMiddleware })
  }
})

`useNitro`

Nitro 인스턴스를 반환합니다.

ready 훅 이후에만 useNitro()를 호출할 수 있습니다.

Nitro 인스턴스 구성에 대한 변경 사항은 적용되지 않습니다.

사용법

import { defineNuxtModule, useNitro } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.hook('ready', () => {
      const nitro = useNitro()
      // Nitro 인스턴스로 무언가를 수행합니다
    })
  }
})

타입

function useNitro (): Nitro

`addServerPlugin`

Nitro의 런타임 동작을 확장하는 플러그인을 추가합니다.

Nitro 플러그인에 대한 자세한 내용은 Nitro 문서를 참조하세요.

사용법

import { createResolver, defineNuxtModule, addServerPlugin } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    const { resolve } = createResolver(import.meta.url)
    addServerPlugin(resolve('./runtime/plugin.ts'))
  }
})

타입

function addServerPlugin (plugin: string): void

매개변수

속성	타입	필수	설명
`plugin`	`string`	`true`	플러그인의 경로. 플러그인은 Nitro 인스턴스를 인수로 받는 기본 함수를 내보내야 합니다.

예제

import { createResolver, defineNuxtModule, addServerPlugin } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    const { resolve } = createResolver(import.meta.url)
    addServerPlugin(resolve('./runtime/plugin.ts'))
  }
})

`addPrerenderRoutes`

Nitro에 프리렌더될 경로를 추가합니다.

사용법

import { defineNuxtModule, addPrerenderRoutes } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-sitemap',
    configKey: 'sitemap',
  },
  defaults: {
    sitemapUrl: '/sitemap.xml',
    prerender: true,
  },
  setup(options) {
    if (options.prerender) {
      addPrerenderRoutes(options.sitemapUrl)
    }
  }
})

타입

function addPrerenderRoutes (routes: string | string[]): void

매개변수

속성	타입	필수	설명
`routes`	`string \| string[]`	`true`	프리렌더할 경로 또는 경로 배열.

`addServerImportsDir`

Nitro에 의해 자동 임포트될 디렉토리를 추가합니다.

사용법

import { defineNuxtModule, createResolver, addServerImportsDir } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule',
  },
  setup(options) {
    const { resolve } = createResolver(import.meta.url)
    addServerImportsDir(resolve('./runtime/server/composables'))
  }
})

타입

function addServerImportsDir (dirs: string | string[], opts: { prepend?: boolean }): void

매개변수

속성	타입	필수	설명
`dirs`	`string \| string[]`	`true`	Nitro에 의해 스캔될 디렉토리 또는 디렉토리 배열.
`opts`	`{ prepend?: boolean }`	`false`	임포트 디렉토리에 대한 옵션. `prepend`가 `true`이면, 디렉토리가 스캔 목록의 시작 부분에 추가됩니다.

예제

addServerImportsDir를 사용하여 Nitro에 의해 스캔될 디렉토리를 추가할 수 있습니다. 이는 Nitro가 커스텀 서버 디렉토리에서 함수를 자동 임포트하도록 하고 싶을 때 유용합니다.

import { defineNuxtModule, createResolver, addServerImportsDir } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule',
  },
  setup(options) {
    const { resolve } = createResolver(import.meta.url)
    addServerImportsDir(resolve('./runtime/server/composables'))
  }
})

서버 코드에서 useApiSecret 함수를 사용할 수 있습니다:

runtime/server/api/hello.ts

const useApiSecret = (): string => ''
// ---cut---
export default defineEventHandler(() => {
  const apiSecret = useApiSecret()
  // apiSecret으로 무언가를 수행합니다
})

`addServerScanDir`

Nitro에 의해 스캔될 디렉토리를 추가합니다. 이는 ~/server 폴더처럼 하위 디렉토리를 확인하여 등록합니다.

오직 ~/server/api, ~/server/routes, ~/server/middleware, 그리고 ~/server/utils만 스캔됩니다.

사용법

import { defineNuxtModule, createResolver, addServerScanDir } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule',
  },
  setup(options) {
    const { resolve } = createResolver(import.meta.url)
    addServerScanDir(resolve('./runtime/server'))
  }
})

타입

function addServerScanDir (dirs: string | string[], opts: { prepend?: boolean }): void

매개변수

속성	타입	필수	설명
`dirs`	`string \| string[]`	`true`	Nitro에 의해 서버 디렉토리로 스캔될 디렉토리 또는 디렉토리 배열.
`opts`	`{ prepend?: boolean }`	`false`	임포트 디렉토리에 대한 옵션. `prepend`가 `true`이면, 디렉토리가 스캔 목록의 시작 부분에 추가됩니다.

예제

addServerScanDir를 사용하여 Nitro에 의해 스캔될 디렉토리를 추가할 수 있습니다. 이는 커스텀 서버 디렉토리를 추가하고 싶을 때 유용합니다.

import { defineNuxtModule, createResolver, addServerScanDir } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule',
  },
  setup(options) {
    const { resolve } = createResolver(import.meta.url)
    addServerScanDir(resolve('./runtime/server'))
  }
})

서버 코드에서 hello 함수를 사용할 수 있습니다.

runtime/server/api/hello.ts

function hello() {
  return 'Hello from server utils!'
}
// ---cut---
export default defineEventHandler(() => {
  return hello() // Hello from server utils!
})

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.

공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/kit/nitro