Nextjs学习入门 - 创建第一个项目

1 通过npx创建一个nextjs项目 

通过命令创建:

npx create-next-app@latest

得到如下项目结构图:

my-app- src //源代码目录- app //引用目录- favicon.ico //网站图标- globals.css //全局css- layout.tsx  //布局文件- page.tsx    //页面  路径"/"- next.config.mjs  //next配置- package.json     //包配置- tailwind.config.ts //tailwind配置- postcss.config.mjs //postcss配置- tsconfig.json    //项目配置文件,包括编译选项、代码检查

2 项目结构

目录:

app应用路由器
pages页面路由器
public要提供的静态资产
src可选的应用程序源文件夹

根文件

next.config.jsNext.js的配置文件
package.json项目依赖项和脚本
instrumentation.tsOpenTelemetry and Instrumentation 文件
middleware.tsNext.js请求中间件
.env环境变量
.env.local局部环境变量
.env.production生产环境变量
.env.development开发环境变量
.eslintrc.jsonESLint 的配置文件
.gitignore要忽略的 Git 文件和文件夹
next-env.d.ts用于 Next.js 的 TypeScript 声明文件
tsconfig.jsonTypeScript 的配置文件
jsconfig.jsonJavaScript 的配置文件

2.1 app目录

package.json:

  • dev:运行next dev以开发模式启动Next.js。
  • build:运行next build构建用于生产的应用程序。
  • start:运行以启动Next.js生产服务器。
  • lint:运行next lint设置Next.js的内置 ESLint 配置。

app/layout.tsx:

export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html lang="en"><body>{children}</body></html>)
}

app/page.tsx:(这是页面)

export default function Page() {return <h1>Hello, Next.js!</h1>
}

2.2 pages目录(可选)

如果您更喜欢使用 Pages Router 而不是 App Router,则可以在项目的根目录下创建一个pages目录。

主页pages/index.tsx:

export default function Page() {return <h1>Hello, Next.js!</h1>
}

布局pages/_layout.tsx:

import type { AppProps } from 'next/app'export default function App({ Component, pageProps }: AppProps) {return <Component {...pageProps} />
}

 自定义文档pages/_document.tsx(在里面添加一个文件来控制服务器的初始响应)

import { Html, Head, Main, NextScript } from 'next/document'export default function Document() {return (<Html><Head /><body><Main /><NextScript /></body></Html>)
}

2.3 public目录

创建一个文件夹来存储静态资产,例如图像、字体等。然后,代码可以从基 URL () 开始引用目录中的文件。public public/

3 项目启动

yarn install
yarn dev

参考文章:

入门:项目结构 |Next.js (nextjs.org)

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

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

相关文章

AntD上传文件 结合Axios 服务端由Spring MVC接收

以下将演示&#xff1a;如何使用AntD的上传组件&#xff0c;结合axios工具&#xff0c;向Spring MVC服务端上传文件。 前端发送 基于AntD的上传组件&#xff0c;采用手工上传模式&#xff1b;上传的同时&#xff0c;附加了一个category参数&#xff1b; const [category, setC…

Scikit-Learn 支持向量机分类

Scikit-Learn 支持向量机分类 1、支持向量机&#xff08;SVM&#xff09;1.1、SVM概述1.2、SVM原理1.3、SVM的损失函数 1、支持向量机&#xff08;SVM&#xff09; 1.1、SVM概述 在机器学习中&#xff0c;支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#x…

华为服务Fellow、首席项目管理专家,华为H5M项目管理标准制定主导者孙虎受邀为PMO大会演讲嘉宾

全国PMO专业人士年度盛会 华为服务Fellow、首席项目管理专家&#xff0c;华为H5M项目管理标准制定主导者孙虎先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“落地项目管理标准&#xff0c;打赢班长的战争”。大会将于5月25-26日在北京举办&am…

国民经济行业导入数据库码表

目录 1、先去下载word文档图片如下 2、粘贴到excel中形成insert 语句 3、创建临时表存excel中数据 4、创建码表保存信息 5、编写存储过程放入表中 5.1存储第四级码值及父机构 5.2存储第三级码值及父机构 5.3存储第二级码值及父机构 5.4存储第一级码值 6、导入成功查看…

react 使用WEB3.0控件开发包 V3.0接入海康威视摄像头

1、下载官方安装包&#xff1a; 2、安装官方插件 3、引入文件 在public/index 中引入监控依赖&#xff0c;这三个文件可以在下载的官方demo中找到 4、react 中使用 useEffect(() > { const ipInfo :[192.168.xxxx];//初始化摄像头const WebVideoCtrl window.WebVideoCtrl…

Linux下kafka单机版搭建

1.zookeeper的安装 这里使用3.6.4版本 前提&#xff1a;服务器已经安装了jdk&#xff0c;zookeeper运行需要jdk环境 1.1创建放zookeeper的目录 #创建目录 mkdir -p /usr/local/zookeeper#赋予权限 chmod 777 /usr/local/zookeeper1.2安装包的下载 #这里推荐去官网下载 https:…

泛型的初步认识(1)

前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&#x…

K8S面试题学习

参考K8S面试题&#xff08;史上最全 持续更新&#xff09;_kubernetes常见面试题-CSDN博客做的个人总结&#xff0c;规划是每天看10题&#xff0c;thx&#xff01; 1.K8S是什么&#xff1f; 容器编排工具&#xff0c;主要用来管理容器化的一个应用&#xff0c;可以管理容器全…

Java 算法篇-深入了解 BF 与 KMP 算法

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 BF 算法概述 1.1 BF 算法实际使用 2.0 KMP 算法概述 2.1 KMP 算法实际使用 2.2 相比于 BF 算法实现&#xff0c;KMP 算法的重要思想 2.3 为什么要这样设计&#x…

listpack

目录 为什么有listpack? listpack结构 listpack的节点entry 长度length encoding编码方式 listpack的API 1.创建listpack 2.遍历操作 正向遍历 反向遍历 3.查找元素 4.插入/替换/删除元素 总结 为什么有listpack? ziplist是存储在连续内存空间&#xff0c;节省…

华为云服务镜像手动更换

操作步骤&#xff1a; 1、进入华为云首页点击云容器引擎CCE&#xff1b; 2、选择你所要更换镜像的环境【这里以dev环境演示】&#xff1b; 3、点击dev环境后选择顶部的命名空间&#xff0c;点击【工作负载】中右侧栏的【升级】按钮&#xff1b; 4、点【更换镜像】选择你在test…

华为OD-C卷-测试用例执行计划[100分]Python3-100%

题目描述 某个产品当前迭代周期内有 N 个特性(F1,F2,......FN)需要进行覆盖测试,每个特性都被评估了对应的优先级,特性使用其 ID 作为下标进行标识。 设计了 M 个测试用例(T1,T2,......,TM),每个测试用例对应一个覆盖特性的集合,测试用例使用其 ID 作为下标进行标识,…

C++之类和对象三

目录 拷贝构造函数 定义铺垫 浅拷贝 深拷贝 总结 拷贝构造函数 那在创建对象时&#xff0c;可否创建一个与一个对象一某一样的新对象呢&#xff1f; 定义铺垫 构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c…

第十五届蓝桥杯大赛软件赛省赛(Java 大学B组)

蓝桥杯 2024年省赛真题 Java 大学B组 试题 A: 报数游戏试题 B: 类斐波那契循环数试题 C: 分布式队列 在找工作&#xff0c;随便写写&#xff0c;安定下来再把去年国赛题解补上 试题 A: 报数游戏 本题总分&#xff1a; 5 5 5 分 【问题描述】 小蓝和朋友们在玩一个报数游戏。由…

顺丰同城急送API对接(附源码)

一、背景 最近公司让我对接顺丰同城急送的API&#xff0c;讲讲里面需要注意的几点 官方的API文档有些示例代码也不全&#xff0c;具体细节不多说&#xff0c;如果你现在也需要对接他们API&#xff0c;可以参考本篇博客再配合官方文档结合起来看&#xff0c;可以让您再开发的时…

期权小知识科普

期权的交易时间 上交所期权合约的交易时间为每个交易日9:15至9:25、9:30至11:30、13&#xff1a;00至15:00。 其中&#xff0c;9:15至9:25为开盘集合竞价时间&#xff0c;14:57-15:00为收盘集合竞价时间&#xff0c;其余时段为连续竞价时间&#xff0c;交易所规则另有规定的除…

Pytorch-自动微分模块

&#x1f947;接下来我们进入到Pytorch的自动微分模块torch.autograd~ 自动微分模块是PyTorch中用于实现张量自动求导的模块。PyTorch通过torch.autograd模块提供了自动微分的功能&#xff0c;这对于深度学习和优化问题至关重要&#xff0c;因为它可以自动计算梯度&#xff0c…

VUE-列表

VUE-列表 列表功能 如下例子 列表展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&qu…

CorelDRAW Graphics Suite2024最新永久免费版功能强大的图形设计软件

CorelDRAW Graphics Suite是一款功能强大的图形设计软件套件&#xff0c;它提供了丰富的绘图工具、编辑功能和设计资源&#xff0c;适用于从专业设计师到普通用户的广泛群体。以下是CorelDRAW Graphics Suite的一些主要功能特点&#xff1a; 矢量图形设计&#xff1a;CorelDRAW…

Jenkins 流水线多阶段构建

Jenkins流水线配置遇到 无法识别的。需要使用 自定义环境 项。 比如官网的在流水线中使用Docker Started by remote host 172.17.0.1 Obtained Jenkinsfile from git http://10.99.20.51:8082/root/java-devops-demo.git org.codehaus.groovy.control.MultipleCompilationErro…