配置Next.js环境 使用vscode

news2025/4/5 7:06:56

配置 Next.js 的开发环境其实非常简单,下面是一个从零开始的完整步骤,适用于 Windows、macOS 和 Linux:


✅ 一、准备工作

确保你已经安装了以下软件:

1. Node.js(推荐 LTS 版本)

官网:https://nodejs.org

安装后终端运行 node -v 和 npm -v 确保正常。

2. 包管理器(npm 或 yarn 或 pnpm)

一般装了 Node.js 就自带 npm。


✅ 二、创建 Next.js 项目

使用 npm:

npx create-next-app@latest my-next-app
cd my-next-app

使用 yarn:

yarn create next-app my-next-app
cd my-next-app

使用 pnpm:

pnpm create next-app my-next-app
cd my-next-app

运行过程中它会问一些问题(比如是否使用 TypeScript、是否添加 ESLint、Tailwind CSS 等),你可以按需选择。


✅ 三、启动开发环境

npm run dev
# 或
yarn dev
# 或
pnpm dev

默认会在 http://localhost:3000 启动开发服务器。


✅ 四、开发建议配置

1. 使用 VS Code 编辑器

推荐安装插件:

• ESLint

• Prettier

• Tailwind CSS IntelliSense(如果你用了 Tailwind)

2. 添加 .env.local 文件存储本地环境变量:

NEXT_PUBLIC_API_URL=http://localhost:8000/api

3. 配置 Git 忽略不必要的文件:

.gitignore 中确认包含以下内容:

node_modules
.next
.env.local


✅ 五、构建生产版本(可选)

npm run build


✅ 六、常见扩展(按需添加)

功能

工具/库

CSS 框架

Tailwind CSS

状态管理

Zustand, Redux, Jotai

后端集成

Next API Routes, tRPC

数据获取方式

SWR, React Query

UI 组件库

Shadcn, Radix UI, Chakra UI


如果你告诉我你要开发的项目类型(比如博客、管理后台、NFT 展示平台等),我可以帮你定制一份最适合的开发环境配置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2327518.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vite相关知识点

一、自动导入vue vue-router pinia 1、安装unplugin-auto-import npm install unplugin-auto-import -D 2、引入 import AutoImport from unplugin-auto-import/vite; 3、配置vite.config.ts plugins: [ vue(), vueDevTools(), AutoImport({ include: [ /…

RCE复现

1.过滤flag <?php error_reporting(0); if(isset($_GET[c])){$c $_GET[c];if(!preg_match("/flag/i", $c)){eval($c);}}else{highlight_file(__FILE__);代码审计过滤了"flag"关键词&#xff0c;但限制较弱&#xff0c;容易绕过 ?csystem("ls&…

电子电气架构 --- 域控制器和EE架构关系

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 周末洗了一个澡,换了一身衣服,出了门却不知道去哪儿,不知道去找谁,漫无目的走着,大概这就是成年人最深的孤独吧! 旧人不知我近况,新人不知我过…

多输入多输出 | Matlab实现CPO-LSTM冠豪猪算法优化长短期记忆神经网络多输入多输出预测

多输入多输出 | Matlab实现CPO-LSTM冠豪猪算法优化长短期记忆神经网络多输入多输出预测 目录 多输入多输出 | Matlab实现CPO-LSTM冠豪猪算法优化长短期记忆神经网络多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现CPO-LSTM冠豪猪算法优化长短期…

使用PyTorch实现LeNet-5并在Fashion-MNIST数据集上训练

本文将展示如何使用PyTorch实现经典的LeNet-5卷积神经网络&#xff0c;并在Fashion-MNIST数据集上进行训练和评估。代码包含完整的网络定义、数据加载、训练流程及结果可视化。 1. 导入依赖库 import torch from torch import nn from d2l import torch as d2l 2. 定义LeNet…

19_20 js es6

目录 ES6 一、let 和 const关键字 1.1 var 和 let const的区别&#xff1f; 1.2 let 和const的区别 1.3 关于块级作用域 二、箭头函数 2.1箭头函数的特点 2.2 箭头函数的特殊性 this的问题 arguments参数集合 2.3函数传递参数时的默认值 2.4 箭头函数使用的场景有哪…

【强化学习】近端策略优化算法(PPO)的理解

本篇博客参考自上海大学刘树林老师的课程。B站课程链接&#xff1a;https://www.bilibili.com/video/BV17t4geUEvQ/?spm_id_from333.337.search-card.all.click&vd_source74af336a587568c23a499122c8ffbbee 文章目录 传统策略梯度训练面临的问题其他方法的改进TRPO算法的贡…

5.好事多磨 -- TCP网络连接Ⅱ

前言 第4章节通过回声服务示例讲解了TCP服务器端/客户端的实现方法。但这仅是从编程角度的学习&#xff0c;我们尚未详细讨论TCP的工作原理。因此&#xff0c;将详细讲解TCP中必要的理论知识&#xff0c;还将给出第4章节客户端问题的解决方案。 一、回声客户端完美实现 第4章…

【零基础入门unity游戏开发——2D篇】SpriteMask精灵遮罩组件

考虑到每个人基础可能不一样&#xff0c;且并不是所有人都有同时做2D、3D开发的需求&#xff0c;所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要讲解C#的基础语法&#xff0c;包括变量、数据类型、运算符、…

PyTorch中卷积层torch.nn.Conv2d

在 PyTorch 中&#xff0c;卷积层主要由 torch.nn.Conv1d、torch.nn.Conv2d 和 torch.nn.Conv3d 实现&#xff0c;分别对应一维、二维和三维卷积操作。以下是详细说明&#xff1a; 1. 二维卷积 (Conv2d) - 最常用 import torch.nn as nn# 基本参数 conv nn.Conv2d(in_channe…

GO语言学习(16)Gin后端框架

目录 ☀️前言 1.什么是前端&#xff1f;什么是后端&#xff1f;&#x1f300; 2.Gin框架介绍 &#x1f337; 3.Gin框架的基本使用 -Hello&#xff0c;World例子&#x1f337; &#x1f33f;入门示例 - Hello&#xff0c;World &#x1f4bb;补充&#xff08;一些常用的网…

RAG 在 AI 助手、法律分析、医学 NLP 领域的实战案例

RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09;是一种结合信息检索和生成模型的技术&#xff0c;广泛应用于 AI 助手、法律分析、医学 NLP 等领域。 以下是具体的实战案例和技术实现。 1. AI 助手中的 RAG 应用 案例 1&#xff1a;企业…

大模型-提示词(Prompt)技巧

1、什么是提示词&#xff1f; 提示词&#xff08;Prompt&#xff09;是用户发送给大语言模型的问题、指令或请求&#xff0c;用来明确地告诉模型用户想要解决的问题或完成的任务&#xff0c;是大语言模型理解用户需求并据此生成相关、准确回答或内容的基础。对于大语言模型来说…

RNN模型与NLP应用——(9/9)Self-Attention(自注意力机制)

声明&#xff1a; 本文基于哔站博主【Shusenwang】的视频课程【RNN模型及NLP应用】&#xff0c;结合自身的理解所作&#xff0c;旨在帮助大家了解学习NLP自然语言处理基础知识。配合着视频课程学习效果更佳。 材料来源&#xff1a;【Shusenwang】的视频课程【RNN模型及NLP应用…

深度剖析:U盘打不开难题与应对之策

一、引言 在数字化办公与数据存储的浪潮中&#xff0c;U盘凭借其小巧便携、大容量存储等优势&#xff0c;成为了人们日常数据传输与备份的得力助手。然而&#xff0c;当我们急需调用U盘中的关键数据时&#xff0c;却常常遭遇U盘打不开的棘手状况。U盘打不开不仅会影响工作进度&…

uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景

背景&#xff1a;最近需要对接了一个 叫 iBeacon 定位信标 硬件设备&#xff0c;这个设备主要的作用是&#xff0c;在信号不好的地方&#xff0c;或者室内实现定位&#xff0c;准确的找到某个东西。就比如 地下停车场&#xff0c;商城里&#xff0c;我们想知道这个停车场的某个…

leetcode-热题100(3)

leetcode-74-搜索二维矩阵 矩阵最后一列升序排序&#xff0c;在最后一列中查找第一个大于等于target的元素 然后在该元素所在行进行二分查找 bool searchMatrix(int** matrix, int matrixSize, int* matrixColSize, int target) {int n matrixSize;int m matrixColSize[0];in…

基于python的电影数据分析及可视化系统

一、项目背景 随着电影行业的快速发展&#xff0c;电影数据日益丰富&#xff0c;如何有效地分析和可视化这些数据成为行业内的一个重要课题。本系统旨在利用Python编程语言&#xff0c;结合数据分析与可视化技术&#xff0c;为电影行业从业者、研究者及爱好者提供一个便捷的电…

[NCTF2019]Fake XML cookbook [XXE注入]

题目源代码 function doLogin(){var username $("#username").val();var password $("#password").val();if(username "" || password ""){alert("Please enter the username and password!");return;}var data "…

【学习记录】pytorch载入模型的部分参数

需要从PointNet网络框架中提取encoder部分的参数&#xff0c;然后赋予自己的模型。因此&#xff0c;需要从一个已有的.pth文件读取部分参数&#xff0c;加载到自定义模型上面。做了一些尝试&#xff0c;记录如下。 关于模型保存与载入 torch.save(): 使用Python的pickle实用程…