React全站框架Next.js使用入门

Next.js是一个基于React的服务器端渲染框架,它可以帮助我们快速构建React应用程序,并具有以下优势:

1. 支持服务器端渲染,提高页面渲染速度和SEO;
2. 自带webpack开发环境,实现即插即用的特性;
3. 支持静态网站生成(SSG)和增量静态网站生成(ISR),提高网站性能。

先看看原网站吧,Next.js - React 应用开发框架 | Next.js中文网

Next.js by Vercel - The React Framework

1. 安装Node.js和npm

还是建议英文官网吧,信息可能更新更及时一些,官网建议node.js版本在18.17以上

 这个就不说了吧,建议使用nvm作为node的多版本管理器,这样开发不同app的时候可以解决node版本不同问题。

nvm安装配置:GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

windows版: GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

安装的时候记得注意看杀毒软件拦截情况,并予以许可,建议让nvm管理自己已经安装过的版本,这样后期切换不会有障碍,如果切换版本有问题建议删除后重新配置。

####查看系统已安装版本
node --version###如果不行,直接安装最新版吧
nvm install node###当然还可以安装指定版本
nvm install 18.17###要查看可用版本
nvm list available##查看已安装版本
nvm list installed

 

直接使用命令切换版本

### 直接使用最新版本
nvm use latest### 使用指定版本
nvm use 16.13.2

2. 创建一个新的Next.js项目

官方建议直接使用create-next-app创建项目,最简单快捷。

可以使用以下命令在终端中创建一个新的Next.js项目:


npx create-next-app my-app

还有手动安装,喜欢折腾的来吧:

##创建文件夹并进入开发文件夹
mkdir my-app
cd my-app## 安装必要的组件
npm install next@latest react@latest react-dom@latest

 修改package.json

{"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint"}
}

3. 运行开发服务器

进入my-app目录,启动框架开发;

在项目根目录下,可以使用以下命令启动开发服务器:

#启动开发
npm run dev

 不出以外的话这个界面就出来了,http://localhost:3000/

4. 熟悉next框架目录结构

Next.js框架目录结构的详细介绍:

  1. pages目录:这个目录用于存放所有的页面组件。Next.js框架将会根据pages中的组件自动生成路由,例如pages/about.js对应的路由为/about。

  2. public目录:这个目录用于存放静态文件,例如图片、字体等等。这些文件可以在组件中使用。

  3. components目录:这个目录用于存放各种可复用组件,例如按钮、表格等等。

  4. utils目录:这个目录用于存放通用的工具函数和常量,例如通用的API请求函数、常量定义等等。

  5. styles目录:这个目录用于存放全局的样式文件。在Next.js中,可以使用CSS模块化来避免样式泄漏的问题。

  6. pages/api目录:这个目录用于存放API相关的组件,例如处理表单数据等等。这些组件可以在客户端和服务端同时使用。

  7. .next目录:这个目录是Next.js框架编译后生成的目录,存放编译后的代码和一些临时文件。

  8. package.json文件:这个文件用于管理项目的依赖和脚本。在Next.js中,一些内置的脚本例如dev、build、start可以用于开发、构建和启动项目。

  9. 启用src目录后,aap目录会放入src下

使用 src 目录和不使用 src 目录的区别在于文件的组织方式。在使用 src 目录时,开发者将所有源代码放置在 src 目录中,而不是将源代码和其他文件混合在一个顶级目录中。

使用 src 目录的好处包括:

  • 更干净和组织良好的文件结构
  • 更容易区分哪些文件是源代码,哪些是其他文件
  • 更容易在构建过程中忽略其他文件,只编译源代码

但是,使用 src 目录也会增加一定的复杂性,因为需要在配置文件中指定源码的路径。如果项目较小,不使用 src 目录也可以,但是在大型项目中,使用 src 目录可能会更好地组织和管理代码。

默认大家都喜欢这个默认目录了,不过因为一般app都要分页,共用很多其他组件,如样式文件,页面独有组件,redux等,所以后面会调整目录,将单个的页面文件修改为文件夹,默认页面以index.js为入口,页面独有css文件以style为名等。详细见后面步骤

5. 习惯整合styled-components(不喜欢的可以掠过)

Next.js和styled-components可以很容易地集成在一起。下面是详细的配置方法和代码。

1. 安装依赖:

npm install styled-components babel-plugin-styled-components

2. 在`.babelrc`中添加`styled-components`插件:

{"presets": ["next/babel"],"plugins": [["styled-components", { "ssr": true }]]
}

这将启用服务器端渲染并使用`styled-components`。

3. 创建`_document.js`文件,这是一个Next.js的特殊文件,用于自定义html的渲染。

// _document.js  创建这个后next.js会先以这个_document.js为入口
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';class MyDocument extends Document {static async getInitialProps(ctx) {const sheet = new ServerStyleSheet();const originalRenderPage = ctx.renderPage;try {ctx.renderPage = () =>originalRenderPage({enhanceApp: (App) => (props) =>sheet.collectStyles(<App {...props} />),});const initialProps = await Document.getInitialProps(ctx);return {...initialProps,styles: (<>{initialProps.styles}{sheet.getStyleElement()}</>),};} finally {sheet.seal();}}render() {return (<Html><Head /><body><Main /><NextScript /></body></Html>);}
}export default MyDocument;

这个文件用于收集所有的server-side渲染的样式,并将它们注入到html中。

4. 创建一个样式组件:

// Button.js   不过建议加上style做标记
import styled from 'styled-components';const Button = styled.button`background-color: #4caf50;color: white;font-size: 20px;padding: 10px 20px;border: none;border-radius: 5px;&:hover {background-color: #3e8e41;}
`;export default Button;

在上述代码中,我们创建了一个名为`Button`的styled-components组件。它将应用一些基本的CSS样式,并在鼠标悬停时变色。

5. 在组件中使用样式组件:

//  home.js
import Button from './Button';const Home = () => {return (<div><h1>My App</h1><Button>Click me</Button></div>);
};export default Home;

在这里,我们将`Button`组件添加到我们的`Home`组件中。

现在,我们已经成功地使用`styled-components`在Next.js中创建了一个样式组件。

6、创建React组件

在`/pages`目录下创建一个`.js`文件,即可创建一个页面。例如,可以在`/pages/index.js`中创建一个简单的React组件:


function Home() {return (<div><h1>Welcome to Next.js!</h1></div>)
}export default Home

7. 目录结构调整

个人习惯改一下原来的目录结构,在src根目录下建立pages(需要再tailwind.config.js里面加入页面资源路径),然后建立components文件夹放一些通用组件,config文件夹放网站常用设置配置,lang配置网站语言信息,redux文件夹专门放redux相关的拆分文件和文件夹,utils放置常用函数等,大家根据自己喜好调整即可。

调整后需要注意调整后各模块的引入路径,基于tailwind.config.js,next.config.js等常用配置来配置参数和路径

这样在浏览器中访问http://localhost:3000,即可查看网站。现在,你可以开始编辑你的React组件和其他文件。不熟悉的人建议一步一步调整,这样可以看到哪里调整了会出错。

以上内容是Next.js的基础入门步骤,你可以学习更多高级的特性和API来构建更具体的应用。

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

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

相关文章

ROS报错:RLException:Invalid roslaunch XML Syntax: mismatched tag:

运行roslaunch文件提示&#xff1a; RLException:Invalid roslaunch XML Syntax: mismatched tag: line 45&#xff0c; column 2 The traceback for the exception was written to the log file. j 解决办法&#xff1a; line45 行多了标签&#xff1a;</node> 另外…

FL Studio 21.2.1.3859中文破解版及FL Studio怎么录制

FL Studio 21.2.1.3859中文破解版是一个数字音频工作站 (DAW)。该软件借助各种编辑工具、插件和效果&#xff0c;让您可以录制、混音和掌握高度复杂的音乐作品。FL Studio 21还允许您注册和编辑 MIDI 文件&#xff0c;您可以在众多可用乐器之一上演奏这些文件。FL Studio 拥有 …

指针、数组与函数例题3

1、字符串复制 题目描述 设计函数实现字符串复制功能&#xff0c;每个字符串长度不超过100&#xff0c;不要使用系统提供的strcpy函数 输入要求 从键盘读入一个字符串到数组b中&#xff0c;以换行符结束 输出要求 将内容复制到另一个数组a中&#xff0c;并分别输出数组a和…

STM32USART+DMA实现不定长数据接收/发送

STM32USARTDMA实现不定长数据接收 CubeMX配置代码分享实践结果 这一期的内容是一篇代码分享&#xff0c;CubeMX配置介绍&#xff0c;关于基础的内容可以往期内容 夜深人静学32系列11——串口通信夜深人静学32系列18——DMAADC单/多通道采集STM32串口重定向/实现不定长数据接收 …

线程池、及Springboot线程池实践

摘要 本文介绍了线程池基本概念、线程及线程池状态、java中线程池提交task后执行流程、Executors线程池工具类、最后介绍在springboot框架下使用线程池和定时线程池&#xff0c;以及task取消 线程池基本 背景 线程池 线程池是一种多线程处理形式&#xff0c;处理过程中将任务…

人工智能学习7(决策树算法)

编译工具&#xff1a;PyCharm 文章目录 编译工具&#xff1a;PyCharm 决策树算法信息熵信息熵例题计算&#xff1a; 信息增益&#xff08;决策树划分依据之一ID3&#xff09;信息增益例题计算&#xff1a; 信息增益率(决策树划分依据之一C4.5)基尼值和基尼指数(决策树划分依据之…

输入日期求n天后

题目要求&#xff1a;输入一个日期startdate年月日和days天数&#xff08;>1&#xff09;&#xff0c;输出自该日期days天后的日期enddate。 要求输出和输出的年份为四位整数&#xff0c;输入时对输入数据的有效性进行检查&#xff1b;同时考虑跨月&#xff0c;跨年和闰年情…

每日3道PWN(第一天)

环境准备 我现在用的是kali 现阶段工具&#xff1a;checkesc、IDA、比较完善的python环境 下载工具的话&#xff0c;我这里不提供了 buuctf——test_your_nc1 参考wp&#xff1a; BUUCTF PWN-----第1题:test_your_nc_buuctf test_your_nc-CSDN博客 查看的资料&#xff1a;…

鸿蒙(HarmonyOS)应用开发——管理组件状态

状态管理 在应用中&#xff0c;界面通常都是动态的。 #mermaid-svg-DrPNsglFkyLqn7Lw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DrPNsglFkyLqn7Lw .error-icon{fill:#552222;}#mermaid-svg-DrPNsglFkyLqn7Lw …

合并两个有序链表[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a; 输入&#…

软著项目推荐 深度学习的口罩佩戴检测 - opencv 卷积神经网络 机器视觉 深度学习

文章目录 0 简介1 课题背景&#x1f6a9; 2 口罩佩戴算法实现2.1 YOLO 模型概览2.2 YOLOv32.3 YOLO 口罩佩戴检测实现数据集 2.4 实现代码2.5 检测效果 3 口罩佩戴检测算法评价指标3.1 准确率&#xff08;Accuracy&#xff09;3.2 精确率(Precision)和召回率(Recall)3.3 平均精…

使用coco数据集进行语义分割:数据预处理与损失函数

如何coco数据集进行目标检测的介绍已经有很多了&#xff0c;但是关于语义分割几乎没有。本文旨在说明如何处理 stuff_train2017.json stuff_val2017.json panoptic_train2017.json panoptic_val2017.json&#xff0c;将上面那些json中的dict转化为图片的label mask&am…

Spring Boot 应用安全监控与管理的最佳实践

摘要&#xff1a; Spring Boot提供了强大的安全性功能&#xff0c;通过整合Spring Security、Actuator和其他相关技术&#xff0c;我们可以实现全面的安全监控和管理。本文将介绍如何在Spring Boot应用中配置和利用这些工具来保护应用的安全性。 1. Spring Security 的配置与使…

BUUCTF 小易的U盘 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 小易的U盘中了一个奇怪的病毒&#xff0c;电脑中莫名其妙会多出来东西。小易重装了系统&#xff0c;把U盘送到了攻防实验室&#xff0c;希望借各位的知识分析出里面有啥。请大家加油噢&#xff0c;不过他特别关照&a…

【SA8295P 源码分析】134 - Android 侧 NFS Client 挂载 QNX NFS Server 目录不成功 问题排查方法

【SA8295P 源码分析】134 - Android 侧 NFS Client 挂载 QNX NFS Server 目录不成功 问题排查方法 一、QNX侧1. 检查镜像是否挂载成功:/mnt/nfs_shared_dir 目录2. 检查 /mnt/etc/exports 文件配置是否正确3. 检查 nfsd、rpcbind 两个服务程序是否在后台工作正常二、Android 检…

【C++ STL】vector类最全详解(什么是vector?vector类的常用接口有哪些?)

目录 一、前言 二、什么是vector ? &#x1f4a6; vector的基本概念 &#x1f4a6;vector的作用是什么 &#x1f4a6;总结 三、 vector的(一维)定义 四、vector(一维)常用接口的使用 &#x1f4a6;vector的常见构造&#xff08;初始化&#xff09; &#x1f4a6;vector…

国内低代码开发平台的功能有多强大?

「低代码」是一个由来已久的概念&#xff0c;早在 2014 年&#xff0c;咨询机构 Forrester 就明确了低代码的含义&#xff0c;利用很少代码或几乎无需写代码就能快速实现应用程序的开发。 而随着低代码的迭代升级&#xff0c;如今的低代码平台也开始被更广泛地采用&#xff0c…

ISIS配置以及详解

作者简介&#xff1a;大家好&#xff0c;我是Asshebaby&#xff0c;热爱网工&#xff0c;有网络方面不懂的可以加我一起探讨 :1125069544 个人主页&#xff1a;Asshebaby博客 当前专栏&#xff1a; 网络HCIP内容 特色专栏&#xff1a; 常见的项目配置 本文内容&am…

2024年天津中德应用技术大学专升本专业课报名及考试时间通知

天津中德应用技术大学2024年高职升本科专业课报名确认及考试通知 按照市高招办《2024年天津市高职升本科招生实施办法》&#xff08;津招办高发〔2023〕14号&#xff09;文件要求&#xff0c;天津中德应用技术大学制定了2024年高职升本科专业课考试报名、确认及考试实施方案&a…

JFrog----软件成分分析(SCA)简介

文章目录 1. SCA的重要性2. SCA的工作方式3. 安全漏洞分析4. 许可证合规性5. 代码质量和维护性结语 在当今的快速发展的软件行业中&#xff0c;软件成分分析&#xff08;Software Composition Analysis&#xff0c;简称SCA&#xff09;已成为一个不可或缺的工具。SCA的主要任务…