Next.js

// 如果没有 React Compiler, 则需要手动 memo 缓存组件, useMemo 缓存值, useCallback 缓存函数以优化重新渲染
import { useMemo, useCallback, memo } from "react";
 
const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(data);
  }, [data]);
 
  const handleClick = useCallback(
    (item) => {
      onClick(item.id);
    },
    [onClick],
  );
 
  return (
    <div>
      {processedData.map((item) => (
      {/* 每次组件更新时, 都会创建新的 () => handleClick(item) 箭头函数, 破坏记忆化! */}
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
});

function ExpensiveComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data);
 
  const handleClick = (item) => {
    onClick(item.id);
  };
 
  return (
    <div>
      {processedData.map((item) => (
        {/* React Compiler 可以在使用或不使用箭头函数的情况下, 正确优化性能
        确保 Item 仅在 props.onClick 更新时重新渲染 */}
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
}

"use client";
 
import Link from "next/link";
import { Component, Suspense } from "react";
 
interface IState {
  cnt: number;
}
 
class AboutLayout extends Component<LayoutProps<"/about">, IState> {
  state = { cnt: 0 };
 
  handleClick = () => {
    const { cnt } = this.state;
    this.setState({ cnt: cnt + 1 }, () => console.log(this.state));
  };
 
  render() {
    const { cnt } = this.state;
    // children: template.tsx
    const { children } = this.props;
    return (
      <>
        <div>AboutLayer cnt {cnt}</div>
        <button onClick={this.handleClick}>addCnt</button>
        <header>AboutLayout header</header>
        <Suspense fallback={<>loading...</>}>{children}</Suspense>
        <Link href="/about/him">/about/him</Link>
        <Link href="/about/her">/about/her</Link>
        <footer>AboutLayout footer</footer>
      </>
    );
  }
}
 
export default AboutLayout;

"use client";
 
import { ReactNode, useState } from "react";
 
interface IProps {
  children: ReactNode;
}
 
const AboutTemplate = function (props: IProps) {
  const [cnt, setCnt] = useState(0);
  const handleClick = () => setCnt(cnt + 1);
  // children: page.tsx
  const { children } = props;
 
  return (
    <>
      <div>cnt: {cnt}</div>
      <button onClick={handleClick}>addCnt</button>
      <header>AboutTemplate header</header>
      {children}
      <footer>AboutTemplate footer</footer>
    </>
  );
};
 
export default AboutTemplate;

// about/page.tsx
"use server";
 
const getData = async (): Promise<{ timestamp: string }> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ timestamp: new Date().toISOString() });
    }, 5000);
  });
};
 
async function AboutPage() {
  const data = await getData();
  return <>About me {data.timestamp}</>;
}
 
export default AboutPage;
 
// about/him/page.tsx
export default function AboutHimPage() {
  return <>About Him</>;
}
 
// about/her/page.tsx
export default function AboutHerPage() {
  return <>About Her</>;
}

function LoadingComponent() {
  return <>loading...</>;
}
 
export default LoadingComponent;

"use client"; // Error 组件必须是客户端组件
 
function ErrorComponent(props: unknown) {
  return <>error: {JSON.stringify(props)}</>;
}
 
export default ErrorComponent;

"use client";
 
import { useParams } from "next/navigation";
 
export default function AboutIdPage() {
  const params = useParams();
  const { id } = params;
  return <>AboutIdPage {id}</>;
}

"use client";
 
import { useParams } from "next/navigation";
 
export default function AboutIdListPage() {
  const params = useParams();
  const { idList } = params;
  return (
    <>
      {Array.isArray(idList) &&
        idList.map((item) => <div key={item}>{item}</div>)}
    </>
  );
}

"use client";
 
import { useParams } from "next/navigation";
 
export default function AboutIdOptionalListPage() {
  const params = useParams();
  const { optionalList } = params;
  return (
    <>
      {Array.isArray(optionalList) &&
        optionalList.map((item) => <div key={item}>{item}</div>)}
    </>
  );
}

import { createDeepSeek } from "@ai-sdk/deepseek";
import { NextRequest } from "next/server";
import { streamText, convertToModelMessages } from "ai";
 
const deepSeek = createDeepSeek({ apiKey: "" });
 
export async function POST(request: NextRequest) {
  const { messages } = await request.json();
  const result = streamText({
    model: deepSeek("deepseek-chat"),
    messages: convertToModelMessages(messages),
    // messages: [
    //   {
    //     role: "user",
    //     content: "Hello!",
    //   },
    //   {
    //     role: "assistant",
    //     content: "Hello! I'm a frontend engineer",
    //   },
    // ],
    system: "Hello! You're a frontend engineer",
  });
  return result.toUIMessageStreamResponse();
}

"use client";
 
import { useChat } from "@ai-sdk/react";
import { Ref, useEffect, useImperativeHandle, useRef } from "react";
 
export interface IExpose {
  sendMessage: (message: { text: string }) => void;
}
 
interface IProps {
  ref: Ref<IExpose>;
}
 
export default function Chat({ ref }: IProps) {
  const { messages, sendMessage } = useChat();
 
  // sendMessage({ text });
  useImperativeHandle(ref, () => ({ sendMessage }), [sendMessage]);
  const containerRef = useRef<HTMLDivElement | null>(null);
 
  // 自动滚动到底部
  useEffect(() => {
    containerRef.current?.scrollIntoView({
      behavior: "smooth",
    });
  }, [messages]);
 
  return (
    <>
      {messages.map((message) => (
        <div key={message.id}>
          {message.parts.map((part, partIdx) => (
            <div key={partIdx}>{part.type === "text" ? part.text : ""}</div>
          ))}
        </div>
      ))}
      <div ref={containerRef} />
    </>
  );
}

"use client";
 
import { ChangeEvent, Component, createRef, ReactNode } from "react";
import Chat, { IExpose as IChatExpose } from "./components/chat";
 
interface IState {
  inputVal: string;
}
 
class ChatPage extends Component<{}, IState> {
  state = {
    inputVal: "",
  };
  handleInput = (e: ChangeEvent<HTMLInputElement>) => {
    this.setState({
      inputVal: e.target.value,
    });
  };
 
  chatRef = createRef<IChatExpose>();
 
  handleSendMessage = () => {
    if (!this.chatRef.current) {
      return;
    }
    const { inputVal } = this.state;
    const { sendMessage } = this.chatRef.current;
    sendMessage({ text: inputVal });
    this.setState({ inputVal: "" });
  };
 
  render(): ReactNode {
    const { inputVal } = this.state;
    return (
      <>
        <Chat ref={this.chatRef} />
        <input value={inputVal} onChange={this.handleInput} />
        <button onClick={this.handleSendMessage}>Send message</button>
      </>
    );
  }
}
 
export default ChatPage;

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/public/*": ["./public/*"]
    }
  }
}

import Image from "next/image";
import nextImg from "@/public/next.svg";
 
export default async function Home() {
  const nextImg2 = await import("@/public/next.svg");
 
  return (
    <>
      {/* 默认 loading="lazy" 懒加载
      使用图片路径 (以 / 开头) 时, 必须指定宽高或使用 fill 撑满父元素 */}
      <Image
        preload
        src="/next.svg"
        loading="eager"
        alt="next"
        width={394}
        height={80}
      />
      {/* 使用 import 导入图片时, 不需要指定宽高 */}
      <Image preload src={nextImg} loading="lazy" alt="next" />
      <Image preload src={nextImg2.default} loading="lazy" alt="next" />
    </>
  );
}

import Script from "next/script";
 
export default async function Home() {
  return (
    <>
      <div id="scoped-app"></div>
      <Script id="inline_script">
        {`
          const { createApp, ref } = Vue;
          createApp({
            template: \`
              <div>
                <div>{{ count }}</div>
                <button @click="addCount">Add count</button>
              </div>
            \`,
            setup() {
              const count = ref(0);
              const addCount = () => count.value++;
              return { count, addCount };
            }
          }).mount('#scoped-app')
        `}
      </Script>
    </>
  );
}

import Script from "next/script";
 
export default async function HomeV3() {
  return (
    <>
      <div id="scoped-app"></div>
      <Script
        id="inline_script"
        dangerouslySetInnerHTML={{
          __html: `
            const { createApp, ref } = Vue;
            createApp({
              template: \`
                <div>
                  <div>{{ count }}</div>
                  <button @click="addCount">Add count</button>
                </div>
              \`,
              setup() {
                const count = ref(0);
                const addCount = () => count.value++;
                return { count, addCount };
              }
            }).mount('#scoped-app')
          `,
        }}
      />
    </>
  );
}

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  output: "export", // 导出静态站点
  distDir: "out", // 导出目录
  trailingSlash: true, // 添加 url 尾部斜杠, 打包 /about.html => /about/index.html
  images: {
    // 自定义 loader
    loader: "custom",
    loaderFile: "./image-loader.ts",
  },
};
 
export default nextConfig;

export default function imageLoader({
  src,
}: {
  src: string;
  width: number;
  quality: number;
}) {
  return `https://github.com/161043261/161043261/tree/main/assets/${src}`; // CDN
}

import createMDX from "@next/mdx";
const withMDX = createMDX({});
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactCompiler: true,
  // 页面的文件扩展名 page.{js,jsx,ts,tsx,md,mdx}
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
};
 
export default withMDX(nextConfig);

import type { MDXComponents } from "mdx/types";
 
const components: MDXComponents = {
  // mdx 全局样式
  h1: (props) => <h1 {...props} className="text-red-300" />,
};
 
export function useMDXComponents(): MDXComponents {
  return components;
}

"use client";
 
import { useState } from "react";
 
export default function MyComponent() {
  const [cnt, setCnt] = useState(0);
  return (
    <>
      <h1>{cnt}</h1>
      <button onClick={() => setCnt(cnt + 1)}>Add</button>
    </>
  );
}

import MyComponent from "./my-component";
 
# Hello MDX
 
<MyComponent />

import { z } from "zod";
 
const loginSchema = z.object({
  username: z.string().min(4).max(16),
  password: z.string().min(4).max(16),
});
 
export interface IState {
  message: string;
}
 
export async function action(
  oldState: IState,
  formData: FormData,
): Promise<IState> {
  return new Promise((resolve) => {
    console.log(oldState, Object.fromEntries(formData));
    setTimeout(() => {
      const res = loginSchema.safeParse(Object.fromEntries(formData));
      if (!res.success) {
        resolve({ message: res.error.message });
      } else {
        resolve({ message: new Date().toISOString() });
      }
    }, 5000);
  });
}

"use client";
 
import { action, IState } from "@/app/lib/login/actions";
import { useActionState } from "react";
 
const initialState: IState = { message: "" };
 
export default function Login() {
  const [state, formAction, isPending] = useActionState<IState, FormData>(
    action,
    initialState,
  );
 
  return (
    <>
      <h1>{isPending ? "Loading..." : state.message}</h1>
      <div className="mx-auto mt-20 w-20">
        <form action={formAction} className="flex flex-col gap-2">
          <input type="text" name="username" placeholder="username" />
          <input type="password" name="password" placeholder="password" />
          <button type="submit">submit</button>
        </form>
      </div>
    </>
  );
}

{
  "scripts": {
    "dev": "BASE_URL=/homepage/ NEXT_PUBLIC_BASE_URL=/homepage/ next dev"
  }
}

"use client";
 
export default function Login() {
  return (
    <>
      <div>process.env.NODE_ENV {process.env.NODE_ENV}</div>
      {/* process.env.BASE_URL 只能在服务器组件中访问 */}
      <div>process.env.BASE_URL {process.env.BASE_URL}</div>
      {/* process.env.NEXT_PUBLIC_BASE_URL
      以 NEXT_PUBLIC_ 开头的环境变量, 服务器组件, 客户端组件中都可以访问 */}
      <div>process.env.NEXT_PUBLIC_BASE_URL {process.env.NEXT_PUBLIC_BASE_URL}</div>
    </>
  );
}

// 支持的语言
export const locales = ["en", "zh", "ja"] as const;
// 默认语言
export const defaultLocale = "en";
 
export interface IResource {
  title: string;
  description: string;
  keywords: string;
}
 
export async function getResource(locale: string): Promise<IResource> {
  return import(`./${locale}.json`).then((module) => module.default);
}

{
  "title": "title",
  "description": "description",
  "keywords": "keywords"
}

{
  "title": "标题",
  "description": "描述",
  "keywords": "关键词"
}

{
  "title": "タイトル",
  "description": "説明",
  "keywords": "キーワード"
}

// 获取客户端的偏好语言
import { NextRequest, NextResponse, ProxyConfig } from "next/server";
import { defaultLocale, locales } from "./i18n";
import Negotiator from "negotiator";
import { match } from "@formatjs/intl-localematcher";
 
export async function proxy(req: NextRequest, res: NextResponse) {
  if (req.nextUrl.pathname === "/") {
    return NextResponse.next();
  }
  if (locales.some((locale) => req.nextUrl.pathname.startsWith(`/${locale}`))) {
    return NextResponse.next();
  }
  const headers = {
    "accept-language": req.headers.get("accept-language") ?? "",
  };
  const negotiator = new Negotiator({ headers });
  const langs = negotiator.languages();
  const lang = match(langs, locales, defaultLocale);
  const { pathname } = req.nextUrl;
  req.nextUrl.pathname = `/${lang}${pathname}`;
  return NextResponse.redirect(req.nextUrl);
}
 
export const config: ProxyConfig = {
  // (?!) 匹配的路径不包含 api, _next/static, _next/image, favicon.ico
  // .* 匹配任意字符 0 次, 1 次或多次
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

"use client";
 
import { locales } from "@/i18n";
import { usePathname, useRouter } from "next/navigation";
import { ChangeEvent } from "react";
 
export default function SwitchI18n({ lang }: { lang: string }) {
  const pathname = usePathname();
  const router = useRouter();
  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const newLang = e.target.value;
    const newPath = pathname.replace(`/${lang}`, `/${newLang}`);
    router.replace(newPath);
  };
  return (
    <select value={lang} onChange={handleChange}>
      {locales.map((locale) => (
        <option key={locale} value={locale}>
          {locale}
        </option>
      ))}
    </select>
  );
}

import { getResource } from "@/i18n";
import SwitchI18n from "./switch-i18n";
export default async function Home({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const { title, description, keywords } = await getResource(lang);
  return (
    <>
      <SwitchI18n lang={lang} />
      <h1>{title}</h1>
      <p>{description}</p>
      <p>{keywords}</p>
    </>
  );
}

import { PHASE_DEVELOPMENT_SERVER, PHASE_TYPE } from "next/constants";
import type { NextConfig } from "next";
 
export default (phase: PHASE_TYPE): NextConfig => {
  const nextConfig: NextConfig = {
    reactCompiler: false,
  };
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    nextConfig.reactCompiler = true; // 开发环境使用 react compiler
  }
  return nextConfig;
};

export declare const PHASE_EXPORT = "phase-export"; // 静态站点导出阶段
export declare const PHASE_PRODUCTION_BUILD = "phase-production-build"; // 生产构建阶段
export declare const PHASE_PRODUCTION_SERVER = "phase-production-server"; // 生产服务器阶段
export declare const PHASE_DEVELOPMENT_SERVER = "phase-development-server"; // 开发服务器阶段
export declare const PHASE_TEST = "phase-test"; // 测试阶段