小白next项目初步上手搭建一个随机社会信用代码生成及验证功能网站

先看看效果

网址是：https://xinyongdaima.aitoolpro.work/#

主要实现功能

1. 实现随机社会信用代码生成及验证；
2. 无数据存储功能；

技术栈

1. next.js
2. tailwind

工具

1. sublime
2. ChatGPT4o

步骤

准备工作：

1. 需要电脑安装node

生成项目

打开终端并运行以下命令：
npx create-next-app@latest my-next-app
这里的 my-next-app 是你的项目名称，你可以根据需要更改。

3. 选择模板（可选）
   在运行上述命令后，你会被提示选择一个模板。你可以选择默认的模板，或者选择其他预设的模板，如 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 use src/ directory with this project? › No / Yes
   ? Would you like to use experimental app/ directory with this project? › No / Yes
   ? What import alias would you like to use? › @/*
   根据你的需求选择相应的选项。

4. 进入项目目录

cd my-next-app 5. 启动开发服务器
在项目目录中，运行以下命令启动开发服务器：

npm run dev
默认情况下，开发服务器会在 http://localhost:3000 上运行。你可以在浏览器中打开这个地址，查看你的 Next.js 应用。

6. 项目结构
   一个基本的 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

如果你能看到网页正常打开~，那么恭喜，成功一半了。
下一篇继续搭建我们想要的模板~