Nuxt3でプレビュー環境を作成する

.env

1NUXT_NEWT_SPACE_UID=sample-for-docs
2NUXT_NEWT_CDN_API_TOKEN=xxxxxxxxxxxxxxx
3NUXT_NEWT_API_TOKEN=xxxxxxxxxxxxxxx
4NUXT_NEWT_PREVIEW_SECRET=hogehoge

nuxt.config.ts

export default defineNuxtConfig({
  （省略）
  runtimeConfig: {
    newt: {
      spaceUid: '',
      cdnApiToken: '',
      apiToken: '',
      previewSecret: ''
    }
  },
  （省略）
})

plugins/newt.server.ts

1import { createClient } from 'newt-client-js'
2
3export default defineNuxtPlugin(() => {
4  const config = useRuntimeConfig()
5
6  const newtClient = createClient({
7    spaceUid: config.newt.spaceUid,
8    token: config.newt.cdnApiToken,
9    apiType: 'cdn'
10  })
11
12  const newtPreviewClient = createClient({
13    spaceUid: config.newt.spaceUid,
14    token: config.newt.apiToken,
15    apiType: 'api'
16  })
17
18  return {
19    provide: {
20      newtClient,
21      newtPreviewClient
22    }
23  }
24})

pages/articles/[slug].vue

1<script lang="ts" setup>
2import type { Article } from '~/types/article'
3
4const route = useRoute()
5const { slug } = route.params
6
7const { data } = await useAsyncData(`article-${slug}`, async () => {
8  const { $newtClient } = useNuxtApp()
9  return await $newtClient.getFirstContent<Article>({
10    appUid: 'blog',
11    modelUid: 'article',
12    query: {
13      slug,
14      select: ['_id', 'title', 'slug', 'body']
15    }
16  })
17})
18const article = data.value
19
20useHead({
21  title: article?.title,
22  meta: [
23    { name: 'description', content: '投稿詳細ページです' }
24  ]
25})
26</script>
27
28<template>
29  <main class="main">
30    <h2>{{ article?.title }}</h2>
31    <!-- eslint-disable-next-line vue/no-v-html -->
32    <div v-html="article?.body" />
33  </main>
34</template>

pages/articles/preview.vue

1<script lang="ts" setup>
2import type { Article } from '~/types/article'
3
4const config = useRuntimeConfig()
5const route = useRoute()
6const { slug, secret } = route.query
7
8// slugパラメータの有無を検証する
9if (!slug) {
10  throw createError({ statusCode: 400, statusMessage: 'Invalid slug' })
11}
12
13// secretを検証する
14if (config.newt && secret !== config.newt.previewSecret) {
15  throw createError({ statusCode: 401, statusMessage: 'Invalid secret' })
16}
17
18const { data } = await useAsyncData(`article-${slug}-preview`, async () => {
19  const { $newtPreviewClient } = useNuxtApp()
20  return await $newtPreviewClient.getFirstContent<Article>({
21    appUid: 'blog',
22    modelUid: 'article',
23    query: {
24      slug: slug?.toString(),
25      select: ['_id', 'title', 'slug', 'body']
26    }
27  })
28})
29const article = data.value
30
31useHead({
32  title: article?.title,
33  meta: [
34    { name: 'description', content: '投稿詳細ページです' },
35    { name: 'robots', content: 'noindex,nofollow' }
36  ]
37})
38</script>
39
40<template>
41  <main class="main">
42    <h2>{{ article?.title }}</h2>
43    <!-- eslint-disable-next-line vue/no-v-html -->
44    <div v-html="article?.body" />
45  </main>
46</template>

nuxt.config.ts

export default defineNuxtConfig({
  （省略）
  nitro: {
    prerender: {
      crawlLinks: true
    }
  },
  （省略）
})

nuxt.config.ts

1import { createClient } from 'newt-client-js'
2import type { Article } from './types/article'
3
4const newtClient = createClient({
5  spaceUid: process.env.NUXT_NEWT_SPACE_UID + '',
6  token: process.env.NUXT_NEWT_CDN_API_TOKEN + '',
7  apiType: 'cdn'
8})
9
10export default defineNuxtConfig({
11  （省略）
12  hooks: {
13    async 'nitro:config' (nitroConfig) {
14      if (nitroConfig.dev || !nitroConfig.prerender) {
15        return
16      }
17
18      const { items: articles } = await newtClient.getContents<Article>({
19        appUid: 'blog',
20        modelUid: 'article',
21        query: {
22          select: ['_id', 'title', 'slug', 'body']
23        }
24      })
25
26      // 全記事の詳細ページを追加
27      nitroConfig.prerender.routes = articles.map((article) => {
28        return `/articles/${article.slug}`
29      })
30
31      // 一覧ページを追加
32      nitroConfig.prerender.routes.push('/')
33    }
34  },
35  （省略）
36})