小白next專案初步上手搭建一個隨機社會信用程式碼生成及驗證功能網站

Star~Star發表於2024-06-17
隨機網站

先看看效果

image

網址是：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 是你的專案名稱，你可以根據需要更改。

  1. 選擇模板（可選）
    在執行上述命令後，你會被提示選擇一個模板。你可以選擇預設的模板，或者選擇其他預設的模板，如 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? › @/*
    根據你的需求選擇相應的選項。

  2. 進入專案目錄

cd my-next-app 5. 啟動開發伺服器
在專案目錄中，執行以下命令啟動開發伺服器：

npm run dev
預設情況下，開發伺服器會在 http://localhost:3000 上執行。你可以在瀏覽器中開啟這個地址，檢視你的 Next.js 應用。

  1. 專案結構
    一個基本的 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

如果你能看到網頁正常開啟~，那麼恭喜，成功一半了。
下一篇繼續搭建我們想要的模板~

相關文章