极客教程如何使用Next.js创建待办事项应用
在本文中，我们将创建一个待办事项应用，并了解Next.js的基础知识。这个待办事项列表可以添加新任务，我们也可以通过点击它们来删除任务。
Next.js 是一个广为认可的React框架，可以实现服务器端渲染并增强交互式用户界面的开发。凭借其强大的功能，可以创建高性能和SEO友好的应用程序，Next.js已成为我们ToDo应用的理想选择。
先决条件：
- 介绍Next.js
- Next.js组件
- React useState
- Javascript Map
- NPM和NPX
让我们看看完成的应用程序将是什么样子：
创建NextJS应用的步骤
步骤1： 使用以下命令创建一个新的Next.js项目
NPX: 是一个随npm 5.2+一起提供的包运行工具，npx是一个易于使用的CLI工具。npx用于执行Node包。
npx create-next-app todo-app
步骤2： 进入项目目录：
cd todo-app
项目结构：
步骤
函数updateInput、addItem、deleteItem和editItem负责根据用户的操作来管理状态。具体而言，updateInput函数在用户在输入框中键入内容时更新userInput状态。另一方面，如果输入框中有内容，addItem函数将向列表状态中添加一个新的待办事项。如果用户点击“删除”按钮，它会触发deleteItem函数，从列表状态中删除一个待办事项。最后，通过使用提示显示，editItem函数使用户能够修改现有的待办事项。
示例： 在这个示例中，我们将看到使用Next.js的待办事项应用程序。
- index.js
import React, { useState } from 'react';
const App = () => {
const [userInput, setUserInput] = useState('');
const [list, setList] = useState([]);
// Set a user input value
const updateInput = (value) => {
setUserInput(value);
};
// Add item if user input is not empty
const addItem = () => {
if (userInput !== '') {
const userInputItem = {
// Add a random id which is used to delete
id: Math.random(),
// Add a user value to list
value: userInput,
};
// Update list
setList([...list, userInputItem]);
// Reset state
setUserInput('');
}
};
// Function to delete item from list using id to delete
const deleteItem = (key) => {
const updatedList =
list.filter((item) => item.id !== key);
setList(updatedList);
};
const editItem = (index) => {
const editedTodo = prompt('Edit the todo:');
if (editedTodo !== null && editedTodo.trim() !== '') {
const updatedTodos = [...list];
updatedTodos[index].value = editedTodo;
setList(updatedTodos);
}
};
return (
<div
style={{
fontFamily: 'Arial, sans-serif',
maxWidth: '600px',
margin: '0 auto',
padding: '20px',
}}
>
<div
style={{
textAlign: 'center',
fontSize: '2.5rem',
fontWeight: 'bold',
marginBottom: '20px',
color: 'green',
}}
>
Geeksforgeeks
</div>
<div
style={{
textAlign: 'center',
fontSize: '1.5rem',
fontWeight: 'bold',
marginBottom: '20px',
}}
>
TODO LIST
</div>
<div
style={{ display: 'flex',
alignItems: 'center',
marginBottom: '20px' }}
>
<input
style={{
fontSize: '1.2rem',
padding: '10px',
marginRight: '10px',
flexGrow: '1',
borderRadius: '4px',
border: '1px solid #ccc',
}}
placeholder="Add item..."
value={userInput}
onChange={(item) =>
updateInput(item.target.value)}
/>
<button
style={{
fontSize: '1.2rem',
padding: '10px 20px',
backgroundColor: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '8px',
cursor: 'pointer',
}}
onClick={addItem}
>
ADD
</button>
</div>
<div
style={{ background: '#f9f9f9',
padding: '20px',
borderRadius: '8px' }}
>
{list.length > 0 ? (
list.map((item, index) => (
<div
key={index}
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '10px',
}}
>
<span style={{ fontSize: '1.2rem',
flexGrow: '1' }}>
{item.value}
</span>
<span>
<button
style={{
padding: '10px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '8px',
marginRight: '10px',
cursor: 'pointer',
}}
onClick={() => deleteItem(item.id)}
>
Delete
</button>
<button
style={{
padding: '10px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '8px',
cursor: 'pointer',
}}
onClick={() => editItem(index)}
>
Edit
</button>
</span>
</div>
))
) : (
<div
style={{ textAlign: 'center',
fontSize: '1.2rem',
color: '#777' }}
>
No items in the list
</div>
)}
</div>
</div>
);
};
export default App;
步骤4： 运行 Next.js 应用程序，请使用以下命令，然后转到此 URL： http://localhost:3000
npm run dev
输出:
