Nodejs Development

作者 mindrally97184105b5da無授權條款269 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫5 週前更新

Node.js development guidelines covering Payload CMS, Vue.js with TypeScript, and general TypeScript best practices

僅含說明Software Development
AI 產生的概覽

Node.js 與 TypeScript 開發指南，涵蓋 Payload CMS、Vue.js 元件與 Zod 驗證模式。

功能
提供 Node.js 搭配 TypeScript 開發的參考指引與程式碼範例。內容涵蓋 Next.js 中的 Payload CMS 集合與 API 路由、Vue.js 元件、組合式函式與 Pinia store、Zod 結構驗證與 Express 中介軟體，以及錯誤處理、非同步與測試的一般實務。產出的是說明性模式與程式碼片段，而非可執行的工具。
適用情境
適用於撰寫或審查 Node.js 專案中的 TypeScript 程式碼，尤其是使用 Payload CMS、Next.js、Vue.js 或 Zod 的情境。適合希望採用成熟模式處理集合、元件、store 與驗證的開發者。
執行需求
除代理外無其他需求；僅為說明文件，不附帶指令碼。

Node.js Development Guidelines

You are an expert in Node.js development with TypeScript, covering various frameworks and patterns.

Payload CMS with Next.js

Project Setup

project/├── src/│   ├── app/              # Next.js app directory│   ├── collections/      # Payload collections│   ├── blocks/          # Custom blocks│   ├── fields/          # Custom fields│   └── access/          # Access control functions├── payload.config.ts    # Payload configuration└── next.config.js       # Next.js configuration

Collection Definition

typescript
import { CollectionConfig } from 'payload/types';
const Posts: CollectionConfig = {  slug: 'posts',  admin: {    useAsTitle: 'title',  },  access: {    read: () => true,    create: ({ req: { user } }) => Boolean(user),    update: ({ req: { user } }) => Boolean(user),    delete: ({ req: { user } }) => Boolean(user),  },  fields: [    {      name: 'title',      type: 'text',      required: true,    },    {      name: 'content',      type: 'richText',    },    {      name: 'publishedDate',      type: 'date',    },  ],};
export default Posts;

API Routes

typescript
// app/api/posts/route.tsimport { getPayloadClient } from '@/lib/payload';
export async function GET() {  const payload = await getPayloadClient();  const posts = await payload.find({    collection: 'posts',    limit: 10,  });  return Response.json(posts);}

Vue.js with TypeScript

Component Structure

vue
<script setup lang="ts">import { ref, computed, onMounted } from 'vue';
interface User {  id: number;  name: string;  email: string;}
const props = defineProps<{  userId: number;}>();
const emit = defineEmits<{  (e: 'update', user: User): void;}>();
const user = ref<User | null>(null);const isLoading = ref(false);
const displayName = computed(() => user.value?.name ?? 'Unknown');
async function fetchUser() {  isLoading.value = true;  try {    const response = await fetch(`/api/users/${props.userId}`);    user.value = await response.json();  } finally {    isLoading.value = false;  }}
onMounted(fetchUser);</script>
<template>  <div v-if="isLoading">Loading...</div>  <div v-else-if="user">    <h2>{{ displayName }}</h2>    <p>{{ user.email }}</p>  </div></template>

Composables

typescript
// composables/useApi.tsimport { ref } from 'vue';
export function useApi<T>(url: string) {  const data = ref<T | null>(null);  const error = ref<Error | null>(null);  const isLoading = ref(false);
  async function execute() {    isLoading.value = true;    error.value = null;
    try {      const response = await fetch(url);      if (!response.ok) throw new Error('Request failed');      data.value = await response.json();    } catch (e) {      error.value = e as Error;    } finally {      isLoading.value = false;    }  }
  return { data, error, isLoading, execute };}

Pinia Store

typescript
// stores/user.tsimport { defineStore } from 'pinia';
interface UserState {  user: User | null;  isAuthenticated: boolean;}
export const useUserStore = defineStore('user', {  state: (): UserState => ({    user: null,    isAuthenticated: false,  }),
  getters: {    displayName: (state) => state.user?.name ?? 'Guest',  },
  actions: {    async login(credentials: LoginCredentials) {      const user = await authService.login(credentials);      this.user = user;      this.isAuthenticated = true;    },
    logout() {      this.user = null;      this.isAuthenticated = false;    },  },});

TypeScript with Zod

Schema Definition

typescript
import { z } from 'zod';
const UserSchema = z.object({  id: z.number(),  name: z.string().min(1),  email: z.string().email(),  role: z.enum(['user', 'admin']),  createdAt: z.date(),});
type User = z.infer<typeof UserSchema>;
const CreateUserSchema = UserSchema.omit({ id: true, createdAt: true });type CreateUserInput = z.infer<typeof CreateUserSchema>;

Validation

typescript
function createUser(input: unknown): User {  const validatedInput = CreateUserSchema.parse(input);  // Input is now typed as CreateUserInput  return {    ...validatedInput,    id: generateId(),    createdAt: new Date(),  };}
// Safe parsing (doesn't throw)function validateUser(input: unknown) {  const result = UserSchema.safeParse(input);  if (!result.success) {    console.error(result.error.issues);    return null;  }  return result.data;}

API Validation Middleware

typescript
import { z } from 'zod';import { Request, Response, NextFunction } from 'express';
function validate<T extends z.ZodSchema>(schema: T) {  return (req: Request, res: Response, next: NextFunction) => {    const result = schema.safeParse(req.body);    if (!result.success) {      return res.status(400).json({ errors: result.error.issues });    }    req.body = result.data;    next();  };}
// Usageapp.post('/users', validate(CreateUserSchema), createUserHandler);

General Best Practices

Error Handling

  • Use custom error classes
  • Implement global error handlers
  • Log errors with context
  • Return appropriate status codes

Async Patterns

  • Use async/await consistently
  • Handle promise rejections
  • Implement proper timeouts
  • Use Promise.all for parallel operations

Testing

  • Write unit tests for utilities
  • Integration tests for APIs
  • Use test fixtures
  • Mock external dependencies

來源與署名

來源：mindrally/skills位於nodejs-development提交9718410

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 mindrally/skills 的技能

Zustand State Management

mindrally

為 React 與 TypeScript 應用程式中的 Zustand 狀態管理提供設計與使用規範。

Software Development2695 週前更新

Zod Schema Validation

mindrally

關於 Zod 結構描述驗證與 TypeScript 型別推斷的實務指引。

Software Development2695 週前更新

Woocommerce

mindrally

針對 WordPress 與 WooCommerce 外掛開發的指南，涵蓋 PHP 規範、鉤子、安全性與擴充模式。

Software Development2695 週前更新

Wordpress

mindrally

以 PHP 規範、安全實務與測試慣例指導 WordPress 與 WooCommerce 開發。

Software Development2695 週前更新

Websocket Development

mindrally

使用 WebSocket 通訊建構即時應用程式的最佳實務與指引。

Software Development2695 週前更新

Web Development

mindrally

提供 Bootstrap、Django、HTMX 以及一般 Web 最佳實務的 Web 開發指南。

Software Development2695 週前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新