作った理由

公式が出してなかったから

泡沫京水

開発環境

Project IDX上でやります。
そのため、環境構築の方法は特に書くことがないため割愛します。

泡沫京水

手順

Remixの環境構築をする（ここは個人で調べてください）
以下を参考にして、Newtのアカウント、Appを作成。以下の情報をいったん控えておく、最後のものは発行して控えておく
- スペースUID
- App UID
- モデルUID
- Newt CDN API Token

環境変数ファイルを作成し、それに控えたデータを入力していく

環境変数自体がstring | undifinedという型になってしまうため、その対策として以下のコードを書く

env.d.ts

import { z } from "zod";

const envVariables = z.object({
  NEWT_SPACE_UID: z.string(),
  NEWT_CDN_API_TOKEN: z.string(),
  NEWT_APP_UID: z.string(),
  NEWT_MODEL_UID: z.string()
});
 
envVariables.parse(process.env);
 
declare global {
  namespace NodeJS {
    interface ProcessEnv extends z.infer<typeof envVariables> {}
  }
}

newt-client-jsのインストールをする

app/newt/newt.server.tsを作成し、以下のコードを書く。

app/newt/newt.server.ts

import { createClient } from 'newt-client-js'

const client = createClient({
  spaceUid: process.env.NEWT_SPACE_UID,
  token: process.env.NEWT_CDN_API_TOKEN,
  apiType: 'cdn',
})

Appを作成して、投稿データの形式を決めているのであれば、受け取るデータの型を定義しておく

app/newt/knowledge.d.ts

/**
* 今回は、後輩たちが閲覧できるサイトの開発のために利用したので、
* 以下のようなスキーマとなっている
*/
import type { Image } from 'newt-client-js'
type Knowledge = {
    _id: string,
    title: string,
    body: string,
    img: Image
}

export default Knowledge

一覧取得関数、詳細の取得関数を定義する

app/newt/newt.server.ts

 /**
 * 6番のコードまんまここにくる
 */

+ const getKnowledges = async () => {
+ return await (await client.getContents<Knowledge>({
+   appUid: process.env.NEWT_APP_UID,
+   modelUid: process.env.NEWT_MODEL_UID,
+   query: {
+       select: ["_id","title","body","img"]
+     }
+  })).items
+}


+ export const getArticleBySlug = async (_id: string):Promise<Knowledge> => {
+   const result = await(await client.getFirstContent<Knowledge>({
+     appUid: process.env.NEWT_APP_UID,
+     modelUid: process.env.NEWT_MODEL_UID,
+     query: {
+       _id,
+       select: ['_id', 'title', 'slug', 'body'],
+    },
+ }))
+   
+   if(result === null){
+     throw new Error()
+   }
+   return result
+ }

一覧表示ページ、詳細表示ページを作成する

泡沫京水

Cloudflare環境で動かす場合

.envというファイルが通常は使用されるが、Cloudflareを使う開発の際は、.dev.varsを使うことになる
また、wrangler secret put <key_name>を実行して、値の入力を求められるので、入力（ほとんどの場合ペースト）することでデプロイ先に環境変数を登録する
- この場合、そのデプロイ先で暗号化されて保存される
この環境変数を扱う場合、interfaceとして型定義されているEnv型のプロパティとして環境変数名を定義せねばならない
- そのため、従来のprocess.envではない

最適解かなってやつ

const env = typeof process !== 'undefined'
    ? process.env
    : context.env

NewtをRemixで扱う手順書

作った理由

開発環境

手順

Cloudflare環境で動かす場合

最適解かなってやつ

ここを書くための参考ページ