1、创建应用
npx create-next-app@14.2.14 mysample --typescript --tailwind --eslint
//创建15版本项目
npx create-next-app@latest mysample --typescript --tailwind --eslint
//创建nextjs15+react19+tailwind4项目
pnpm create next-app@canary --tailwind --eslint --typescript --app --no-src-dir
2、集成Shadcn
初始化：
npx shadcn@latest init
安装组件：
#单项安装
npx shadcn@latest add button
# 可选安装
npx shadcn@latest add --all
3、项目改造
3.1、水合错误
在html标签上增加 suppressHydrationWarning,可以解决因服务端和客户端水合报错问题。
<html lang="en" suppressHydrationWarning>
3.2、修改字体
import { Inter } from "next/font/google";
const inter=Inter({ subsets: ["latin"] });
<body
className={`${inter.className} antialiased`}
>
3.3、使用meta
3.3.1、配置文件
.env
APP_NAME="Next Shadcn-test"
APP_DESCRIPTION="Basic dashboard with Next.js and Shadcn"
3.3.2、常量定义
/constants/index.ts
export const APP_NAME=process.env.APP_NAME||"Next Shadcn";
export const APP_DESCRIPTION=process.env.APP_DESCRIPTION||"Basic dashboard with Next.js and Shadcn";
3.3.3、配置meta
/app/layout.tsx
export const metadata: Metadata = {
title: {
default: APP_NAME,
template: `%s | ${APP_NAME}`
},
description: APP_DESCRIPTION,
keywords: [
"零售",
"ERP",
],
openGraph: {
images:'/images/logo.png'
},
metadataBase: new URL("https://localhost:3000"),//一些配置项的说明地址
};
3.4、程序图标
覆盖/app/favicon.ico
