nextjs-app-router

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PostHog integration for Next.js App Router

适用于Next.js App Router的PostHog集成

This skill helps you add PostHog analytics to Next.js App Router applications.

本技能可帮助你为Next.js App Router应用添加PostHog分析功能。

Workflow

操作流程

Follow these steps in order to complete the integration:

```
basic-integration-1.0-begin.md
```
- PostHog Setup - Begin ← Start here
```
basic-integration-1.1-edit.md
```
- PostHog Setup - Edit
```
basic-integration-1.2-revise.md
```
- PostHog Setup - Revise
```
basic-integration-1.3-conclude.md
```
- PostHog Setup - Conclusion

请按照以下步骤完成集成：

```
basic-integration-1.0-begin.md
```
- PostHog 配置 - 开始 ← 从此处开始
```
basic-integration-1.1-edit.md
```
- PostHog 配置 - 编辑
```
basic-integration-1.2-revise.md
```
- PostHog 配置 - 修订
```
basic-integration-1.3-conclude.md
```
- PostHog 配置 - 完成

Reference files

参考文件

```
EXAMPLE.md
```
- Next.js App Router example project code
```
next-js.md
```
- Next.js - docs
```
identify-users.md
```
- Identify users - docs
```
basic-integration-1.0-begin.md
```
- PostHog setup - begin
```
basic-integration-1.1-edit.md
```
- PostHog setup - edit
```
basic-integration-1.2-revise.md
```
- PostHog setup - revise
```
basic-integration-1.3-conclude.md
```
- PostHog setup - conclusion

The example project shows the target implementation pattern. Consult the documentation for API details.

```
EXAMPLE.md
```
- Next.js App Router 示例项目代码
```
next-js.md
```
- Next.js - 文档
```
identify-users.md
```
- 用户识别 - 文档
```
basic-integration-1.0-begin.md
```
- PostHog 配置 - 开始
```
basic-integration-1.1-edit.md
```
- PostHog 配置 - 编辑
```
basic-integration-1.2-revise.md
```
- PostHog 配置 - 修订
```
basic-integration-1.3-conclude.md
```
- PostHog 配置 - 完成

示例项目展示了目标实现模式。如需了解API细节，请查阅相关文档。

Key principles

核心原则

Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
Match the example: Your implementation should follow the example project's patterns as closely as possible.

环境变量：始终使用环境变量存储PostHog密钥，绝不要硬编码。
最小改动：在现有集成代码旁添加PostHog代码，不要替换或重构现有代码。
匹配示例：你的实现应尽可能贴近示例项目的模式。

Framework guidelines

框架准则

Never use useEffect() for analytics capture - it's brittle and causes errors
Prefer event handlers or routing mechanisms to trigger analytics calls
Add handlers where user actions occur rather than reacting to state changes
Remember that source code is available in the node_modules directory

切勿使用useEffect()来捕获分析数据——这种方式不稳定且易引发错误
优先使用事件处理程序或路由机制触发分析调用
在用户操作发生的位置添加处理程序，而非响应状态变化
注意：源代码可在node_modules目录中找到

Identifying users

用户识别

Call

posthog.identify()

on the client side during login and signup events. Use form contents to identify users on submit. If server-side code exists, pass the client-side session and distinct ID using

X-POSTHOG-DISTINCT-ID

and

X-POSTHOG-SESSION-ID

headers to maintain correlation.

在登录和注册事件期间，在客户端调用

posthog.identify()

。提交表单时使用表单内容识别用户。如果存在服务端代码，请通过

X-POSTHOG-DISTINCT-ID

和

X-POSTHOG-SESSION-ID

头传递客户端会话和唯一ID，以保持关联。

Error tracking

错误追踪

Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.

在相关文件中添加PostHog错误追踪，尤其是在关键用户流程和API边界附近。