先看看效果
网址是:https://xinyongdaima.aitoolpro.work/#
主要实现功能
- 实现随机社会信用代码生成及验证;
- 无数据存储功能;
技术栈
- next.js
- tailwind
工具
- sublime
- ChatGPT4o
步骤
准备工作:
- 需要电脑安装node
生成项目
打开终端并运行以下命令:
npx create-next-app@latest my-next-app
这里的 my-next-app 是你的项目名称,你可以根据需要更改。
-
选择模板(可选)
在运行上述命令后,你会被提示选择一个模板。你可以选择默认的模板,或者选择其他预设的模板,如 TypeScript 模板。
? What is your project named? … my-next-app
? Would you like to use TypeScript with this project? › No / Yes
? Would you like to use ESLint with this project? › No / Yes
? Would you like to use Tailwind CSS with this project? › No / Yes
? Would you like to usesrc/
directory with this project? › No / Yes
? Would you like to use experimentalapp/
directory with this project? › No / Yes
? What import alias would you like to use? › @/*
根据你的需求选择相应的选项。 -
进入项目目录
cd my-next-app
5. 启动开发服务器
在项目目录中,运行以下命令启动开发服务器:
npm run dev
默认情况下,开发服务器会在 http://localhost:3000 上运行。你可以在浏览器中打开这个地址,查看你的 Next.js 应用。
- 项目结构
一个基本的 Next.js 项目结构如下:
点击查看代码
my-next-app/
├── node_modules/
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── src/
│ ├── pages/
│ │ ├── api/
│ │ │ └── hello.js
│ │ ├── _app.js
│ │ ├── index.js
│ └── styles/
│ ├── globals.css
│ └── Home.module.css
├── .gitignore
├── package.json
├── README.md
└── next.config.js
如果你能看到网页正常打开~,那么恭喜,成功一半了。
下一篇继续搭建我们想要的模板~