從零開始創建一個 Next.js 項目并實現一個 TodoList 示例

Next.js 是一個基于 React 的服務端渲染框架,它提供了很多開箱即用的功能,如自動路由、API 路由、靜態生成、增量靜態再生等。本文將帶你一步步創建一個 Next.js 項目,并實現一個簡單的 TodoList 功能。


效果地址

🧱 安裝 Next.js 項目

首先確保你的開發環境已經安裝了 Node.js(推薦版本為 Node.js 18.18 或更高)。

接下來使用 create-next-app 創建一個新的 Next.js 項目:

npm i create-next-app@latest
npx create-next-app@latest nexy-app

在創建過程中,命令行會引導你選擇以下配置項:

√ What is your project named? ... nexy-app
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for `next dev`? ... No
√ Would you like to customize the import alias (`@/*` by default)? ... Yes
√ What import alias would you like configured? ... @/*

這些選項的作用:

選項說明
TypeScript啟用 TypeScript 支持
ESLint添加代碼規范支持
Tailwind CSS使用 Tailwind CSS 作為樣式工具
src/ 目錄將代碼結構放在 src 文件夾下
App Router使用 Next.js 13+ 推薦的 App Router 系統
Turbopack使用實驗性的快速打包工具
導入別名設置模塊路徑別名,方便引用

完成后,進入項目目錄并運行開發服務器:

cd nexy-app
npm run dev

📁 Next.js 的文件系統路由機制

Next.js 13+ 引入了基于文件系統的路由系統(File-system based routing),這是其核心特性之一 。

基本規則如下:

  • 每個 src/app 下的文件夾代表一個路由段。
  • 文件夾中的 page.tsx 是該路由的頁面組件。
  • 特殊文件有特定用途:
    • layout.tsx:共享布局
    • loading.tsx:加載狀態組件
    • error.tsx:錯誤邊界
    • not-found.tsx:404 頁面

示例結構:

src/
└── app/├── page.tsx → /├── about/│   └── page.tsx → /about├── contact/│   └── page.tsx → /contact

Next.js 會在構建時自動掃描 app 目錄,根據目錄結構生成對應的路由配置,無需手動注冊 。


? 實現一個 TodoList 示例

下面我們將創建一個簡單的 TodoList 頁面,演示如何在 Next.js 中使用客戶端組件和狀態管理。

步驟一:創建頁面文件

src/app 目錄下新建一個 todo 文件夾,并在其內部創建 page.tsx 文件:

src/app/todo/page.tsx

步驟二:編寫 TodoList 組件

"use client"; // 表示這是一個客戶端組件import React, { useState } from "react";// 定義 Todo 項的類型
interface TodoItem {id: number;text: string;completed: boolean;
}export default function TodoPage() {const [todos, setTodos] = useState<TodoItem[]>([]);const [inputValue, setInputValue] = useState("");const addTodo = (e: React.FormEvent) => {e.preventDefault();if (inputValue.trim() === "") return;const newTodo: TodoItem = {id: Date.now(),text: inputValue.trim(),completed: false,};setTodos([...todos, newTodo]);setInputValue("");};const toggleTodo = (id: number) => {setTodos(todos.map((todo) =>todo.id === id ? { ...todo, completed: !todo.completed } : todo));};const deleteTodo = (id: number) => {setTodos(todos.filter((todo) => todo.id !== id));};return (<div className="min-h-screen p-8"><div className="max-w-md mx-auto"><h1 className="text-3xl font-bold mb-8 text-center">Todo List</h1>{/* 添加 Todo 的表單 */}<form onSubmit={addTodo} className="mb-8"><div className="flex gap-2"><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}placeholder="添加新的待辦事項..."className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"/><buttontype="submit"className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">添加</button></div></form>{/* Todo 列表 */}<ul className="space-y-3">{todos.map((todo) => (<likey={todo.id}className="flex items-center justify-between p-4 bg-white rounded-lg shadow"><div className="flex items-center gap-3"><inputtype="checkbox"checked={todo.completed}onChange={() => toggleTodo(todo.id)}className="w-5 h-5 text-blue-500 rounded focus:ring-blue-500"/><spanclassName={`${todo.completed? "line-through text-gray-500": "text-gray-800"}`}>{todo.text}</span></div><buttononClick={() => deleteTodo(todo.id)}className="text-red-500 hover:text-red-700 focus:outline-none">刪除</button></li>))}</ul>{/* 顯示 Todo 統計信息 */}{todos.length > 0 && (<div className="mt-4 text-sm text-gray-500">總計: {todos.length} 項 | 已完成:{" "}{todos.filter((t) => t.completed).length} 項</div>)}</div></div>);
}

步驟三:訪問頁面

現在你可以訪問 http://localhost:3000/todo 查看這個 TodoList 頁面。


🌟 Next.js 的優勢總結

  1. 自動路由:無需手動注冊路由,基于文件結構自動生成。
  2. Server Components 和 Client Components 分離:提升性能和可維護性。
  3. 集成 Tailwind CSS:輕松構建現代 UI。
  4. 支持 TypeScript:提供更強的類型安全。
  5. SSG & SSR 支持:適合 SEO 友好型網站。
  6. Turbopack / Fast Refresh:更快的開發體驗。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/905896.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/905896.shtml
英文地址,請注明出處:http://en.pswp.cn/news/905896.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

分布式鎖: Redisson紅鎖(RedLock)原理與實現細節

分布式鎖是分布式系統的核心基礎設施&#xff0c;但 單節點 Redis 鎖在高可用場景下存在致命缺陷&#xff1a;當 Redis 主節點宕機時&#xff0c;從節點可能因異步復制未完成而丟失鎖信息&#xff0c;導致多個客戶端同時持有鎖。為此&#xff0c;Redis 作者 Antirez 提出了 Red…

c++多態面試題之(析構函數與虛函數)

有以下問題展開 析構函數要不要定義成虛函數&#xff1f;基類的析構函數要不要定義成虛函數&#xff1f;如果不定義會有什么問題&#xff0c;定義了在什么場景下起作用。 1. 基類析構函數何時必須定義為虛函數&#xff1f; 當且僅當通過基類指針&#xff08;或引用&#xff09;…

Python高級進階:Vim與Vi使用指南

李升偉 整理 在 Python 高級進階中&#xff0c;使用 Vim 或 Vi 作為代碼編輯器可以顯著提升開發效率&#xff0c;尤其是在遠程服務器開發或快速腳本編輯時。以下是關于它們在 Python 開發中的高級應用詳解&#xff1a; 1. Vim/Vi 簡介 Vi&#xff1a;經典的 Unix 文本編輯器…

Dify中使用插件LocalAI配置模型供應商報錯

服務器使用vllm運行大模型&#xff0c;今天在Dify中使用插件LocalAI配置模型供應商后&#xff0c;使用工作流的時候&#xff0c;報錯&#xff1a;“Run failed: PluginInvokeError: {"args":{},"error_type":"ValueError","message":&…

深度學習驅動下的目標檢測技術:原理、算法與應用創新(二)

三、主流深度學習目標檢測算法剖析 3.1 R - CNN 系列算法 3.1.1 R - CNN 算法詳解 R - CNN&#xff08;Region - based Convolutional Neural Networks&#xff09;是將卷積神經網絡&#xff08;CNN&#xff09;應用于目標檢測領域的開創性算法&#xff0c;其在目標檢測發展歷…

【Umi】項目初始化配置和用戶權限

app.tsx import { RunTimeLayoutConfig } from umijs/max; import { history, RequestConfig } from umi; import { getCurrentUser } from ./services/auth; import { message } from antd;// 獲取用戶信息 export async function getInitialState(): Promise<{currentUse…

[學習] RTKLib詳解:qzslex.c、rcvraw.c與solution.c

RTKLib詳解&#xff1a;qzslex.c、rcvraw.c與solution.c 本文是 RTKLlib詳解 系列文章的一篇&#xff0c;目前該系列文章還在持續總結寫作中&#xff0c;以發表的如下&#xff0c;有興趣的可以翻閱。 [學習] RTKlib詳解&#xff1a;功能、工具與源碼結構解析 [學習]RTKLib詳解…

移植RTOS,發現任務棧溢出怎么辦?

目錄 1、硬件檢測方法 2、軟件檢測方法 3、預防堆棧溢出 4、處理堆棧溢出 在嵌入式系統中&#xff0c;RTOS通過管理多個任務來滿足嚴格的時序要求。任務堆棧管理是RTOS開發中的關鍵環節&#xff0c;尤其是在將RTOS移植到新硬件平臺時。堆棧溢出是嵌入式開發中常見的錯誤&am…

window 顯示驅動開發-使用有保證的協定 DMA 緩沖區模型

Windows Vista 的顯示驅動程序模型保證呈現設備的 DMA 緩沖區和修補程序位置列表的大小。 修補程序位置列表包含 DMA 緩沖區中命令引用的資源的物理內存地址。 在有保證的協定模式下&#xff0c;用戶模式顯示驅動程序知道 DMA 緩沖區和修補程序位置列表的確切大小&#xff0c;…

SD-HOST Controller design-----SD CLK 設計

hclk的分頻電路&#xff0c;得到的分頻時鐘作為sd卡時鐘。 該模塊最終輸出兩個時鐘&#xff1a;一個為fifo_sd_clk,另一個為out_sd_clk_dft。當不分頻時&#xff0c;fifo_sd_clk等于hclk&#xff1b;當分頻時候&#xff0c;div_counter開始計數&#xff0c;記到相應分頻的時候…

完全背包問題中「排列數」與「組合數」的核心區別

&#x1f3af; 一句話理解 求組合數&#xff08;不計順序&#xff09; → 外層遍歷物品&#xff0c;內層遍歷背包容量 求排列數&#xff08;計順序&#xff09; → 外層遍歷背包容量&#xff0c;內層遍歷物品 &#x1f3b2; 舉例說明 假設有硬幣 [1, 2, 3]&#xff0c;目標金…

NHANES指標推薦:MDS

文章題目&#xff1a;The association between magnesium depletion score (MDS) and overactive bladder (OAB) among the U.S. population DOI&#xff1a;10.1186/s41043-025-00846-x 中文標題&#xff1a;美國人群鎂耗竭評分 &#xff08;MDS&#xff09; 與膀胱過度活動癥…

C++:字符串操作函數

strcpy() 功能&#xff1a;把一個字符串復制到另一個字符串。 #include <iostream> #include <cstring> using namespace std;int main() {char src[] "Hello";char dest[10];strcpy(dest, src);cout << "Copied string: " << …

1基·2臺·3空間·6主體——藍象智聯解碼可信數據空間的“數智密碼”

近日&#xff0c;由全國數據標準化技術委員會編制的《可信數據空間 技術架構》技術文件正式發布&#xff0c;標志著我國數據要素流通體系向標準化、規范化邁出關鍵一步。該文件從技術功能、業務流程、安全要求三大維度對可信數據空間進行系統性規范&#xff0c;為地方、行業及企…

基于TI AM6442+FPGA解決方案,支持6網口,4路CAN,8個串口

TI AM6442FPGA解決方案具有以下技術優勢及適用領域&#xff1a; 一、技術優勢 ?異構多核架構?&#xff1a;AM6442處理器集成7個內核&#xff08;2xCortex-A534xCortex-R5F1xCortex-M4F&#xff09;&#xff0c;可實現應用處理、實時控制和獨立任務分核協同&#xff0c;滿足…

android vlc播放rtsp

最近在做IOT開發&#xff0c;需要把IOT設備的RTSP流在手機端播放&#xff0c;VLC是個不錯的選擇&#xff0c;使用起來簡單方便。 1、在AndroidManifest.xml 中添加網絡權限 <uses-permission android:name"android.permission.INTERNET"/> <uses-permissi…

前端面經 9 JS中的繼承

借用Class實現繼承 實現繼承 extends super extends 繼承父類 super調用父類的構造函數 子類中存在方法采取就近原則 &#xff0c;子類構造函數需要使用super()調用父類的構造函數 JS 靜態屬性和私有屬性 寄生組合式繼承

jQuery知識框架

一、jQuery 基礎 核心概念 $ 或 jQuery&#xff1a;全局函數&#xff0c;用于選擇元素或創建DOM對象。 鏈式調用&#xff1a;多數方法返回jQuery對象&#xff0c;支持連續操作。 文檔就緒事件&#xff1a; $(document).ready(function() { /* 代碼 */ }); // 簡寫 $(function…

【HCIA】BFD

前言 前面我們介紹了浮動路由以及出口路由器的默認路由配置&#xff0c;可如此配置會存在隱患&#xff0c;就是出口路由器直連的網絡設備并不是運營商的路由器&#xff0c;而是交換機。此時我們就需要感知路由器的存活狀態&#xff0c;這就需要用到 BFD&#xff08;Bidirectio…

前端流行框架Vue3教程:18. _組件數據傳遞

透傳 Attributes 透傳attribute指的是傳遞給一個組件&#xff0c;卻沒有被該組件聲明為props或emits的attribute或者v-on事件監聽器。最常見的例子就是class、style和id 當一個組件以單個元素為根作渲染時&#xff0c;透傳的attribute會自動被添加到根元素上 透傳 Attributes …