(一)新手福音, 从0到1教你一步步搭建Next.js电商平台!前言搭建Next.js电商平台, 我们将用到的技术栈如

前言

搭建Next.js电商平台, 我们将用到的技术栈如下:

Next.js 15 / React 19
PostgreSQL(关系型数据库管理系统)
Prisma ORM

现代化的 ORM（对象关系映射，Object-Relational Mapping）工具，专为 Node.js 和 TypeScript 设计，用于简化数据库操作
Typescript, ESlint & Zod

Zod是一个用于 TypeScript 的验证库，主要用于确保数据的正确性、一致性和安全性。
ShadCN UI

ShadCN UI 是一个基于 React 和 Tailwind CSS 构建的现代化、可定制且易于使用的 UI 组件库
Next Auth

处理用户身份验证和授权
React Hook Form

一个轻量级、高性能且易于使用的表单管理库
Jest Testing
Vercel Deployment

VSCode里的插件安装

ESLint

JavaScript(ES6) code snippets

Markdown

该插件安装好了之后, 打开项目里的.md文件时, 可使用Markdown 内置模板方式打开

截屏2025-02-24 16.15.24.png

Prettier

Simple React Snippets

Prisma

Tailwind CSS

新建项目

初始化

使用npx创建项目

npx create-next-app@latest

所有选项都选择默认即可. 但是在安装依赖选项时, 需选择--legacy-peer-deps, 而不是--force, 原因如下:

--force：强制 npm 安装所有依赖，即便存在冲突也会继续安装。不过这种方式可能会让项目依赖不稳定
--legacy-peer-deps：让 npm 采用旧的 peer 依赖解析策略，忽略 peer 依赖冲突

`page.tsx`

项目初始化之后, 执行npm run dev, 注意node版本号需大于18, 我当前使用的是18.20.4

将page.tsx代码全部清空, 输入sfc, 便能自动生成如下代码块

截屏2025-02-24 16.58.37.png

截屏2025-02-24 16.59.11.png

补齐代码

截屏2025-02-24 17.00.53.png

刷新页面, 已更新显示Prostore

layout.tsx是根页面, children渲染所有的子节点.

引入google里的样式

修改layout.tsx默认样式, 引入google样式

环境变量`env`

在项目根目录创建env文件, 这样部署打包之后, 可以直接在服务端改环境变量.

在lib文件夹内, 新建constants文件夹, 再在下面创建index.ts, 代码如下所示

export const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME || "Prostore2";
export const APP_DESCRIPTION =
  process.env.NEXT_PUBLIC_APP_DESCRIPTION ||
  "A modern ecommerce store built with Next.js";
export const SERVER_URL =
  process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3000";

`global.css`

修改assets下的global.css文件

添加资源图片

在public文件夹下面, 导入images图片, 如下图所示

引入`ShadCN UI`

运行命令npx shadcn@latest init, 成功之后, 自动在根目录生成components.json

引入组件库内的button, 执行命令npx shadcn@latest add button, 自动在根目录生成components文件夹

在page.tsx内引入button, 如下所示

import { Button } from "@/components/ui/button";

export const metadata = {
  title: 'Home',
}

const Homepage = () => {
  return ( <Button>Button</Button> );
}
 
export default Homepage;

创建(root)文件夹

文件夹名称要取为(root), 加括号表示为整体, 因为(root)下的cart.tsx文件, 页面访问它时, 是把它当作根路径下的文件访问, 即通过http://localhost:3000/cart, 而不是http://localhost:3000/root/cart

将app下的page.tsx移入(root)文件夹, 并在该文件夹内新增layout.tsx, layout.tsx代码如下

import type { Metadata } from "next";
export const metadata: Metadata = {
  title: "Prostore",
  description: "A modern ecommerce platform built width Next.js",
};
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex h-screen flex-col">
      <main className="flex-1 wrapper">
        { children }
      </main>
    </div>
  );
}

修改page.tsx, 代码如下所示

import { Button } from "@/components/ui/button";

export const metadata = {
  title: 'Home',
}

const Homepage = () => {
  return ( <Button>Button</Button> );
}
 
export default Homepage;

占位符`%s`

在app文件夹内, 有根文件layout.tsx, 修改metadata内的title

export const metadata: Metadata = {
  title: {
    template: `%s | Prostore`,
    default: APP_NAME
  },
   // 通常用于搜索引擎优化（SEO），描述该页面的主要内容
  description: APP_DESCRIPTION,
  metadataBase: new URL(SERVER_URL)
};

此时, 刷新页面, 鼠标移到页签上, 将看到Home | Prostore, 占位符已起到作用.

结语

至此, 我们已完成电商平台的搭建工作, 感兴趣的同学欢迎点赞、评论哦, 我们将在后续课程继续讲解~

Github仓库链接: 电商平台

(一)新手福音, 从0到1教你一步步搭建Next.js电商平台!

前言