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来构建更具体的应用。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【改进YOLOV8】融合EfficientViT骨干网络的车辆颜色车牌识别系统

【改进YOLOV8】融合EfficientViT骨干网络的车辆颜色车牌识别系统

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义&#xff1a; 随着交通事故的不断增加和交通管理的日益重要&#xff0c;车辆识别系统在交通领域中的应用变得越来越重要。车辆颜色和车牌识别系统是车辆识别系统中…
阅读更多...
DeepVoice AI - Text To Voice

DeepVoice AI - Text To Voice

No sign-up, No API Keys, no recurr
阅读更多...
StarRocks上新，“One Data、All Analytics”还有多远？

StarRocks上新，“One Data、All Analytics”还有多远？

K.K在《未来十二大趋势》中认为&#xff0c;我们正处于一个数据流动的时代。商业乃数据之商业。归根结底&#xff0c;你在处理的都是数据。 的确&#xff0c;当数据成为新的核心生产要素之际&#xff0c;数据分析就犹如最重要的生产工具之一&#xff0c;决定着企业在数字化时代…
阅读更多...
ADAudit Plus：强大的网络安全卫士

ADAudit Plus：强大的网络安全卫士

随着数字化时代的不断发展&#xff0c;企业面临着越来越复杂和多样化的网络安全威胁。在这个信息爆炸的时代&#xff0c;保护组织的敏感信息和确保网络安全已经成为企业发展不可或缺的一环。为了更好地管理和监控网络安全&#xff0c;ADAudit Plus应运而生&#xff0c;成为网络…
阅读更多...
CO11N报工时，在填入返工数量后自动产生返工工单

CO11N报工时，在填入返工数量后自动产生返工工单

本文档主要说明一种返工流程，当工人报工时，填写返工数量、变式原因即可启动触发点自动创建返工订单，被创建的反工订单为无料号生产订单，且关联报工订单。涉及系统功能点包括状态参数 一、 后台配置 1）.用户状态参数：BS02（SPRO-生产-商店低价控制-主数据-订单-定义状态…
阅读更多...
ROS2 galactic生成的bag包里的MarkerArray在humble下播放不正常

ROS2 galactic生成的bag包里的MarkerArray在humble下播放不正常

近期发现ROS2 galactic下生成的bag包在humble下回放时使用rviz可视化&#xff0c;bag里的点云可以正常看到&#xff0c;但是使用Marker和MarkerArray画的box却死活看不到&#xff0c;感觉很纳闷&#xff0c;看网上有人报告说foxy下生成的bag包在galactic下播放会报SQL错误&…
阅读更多...
干货|水表基础知识大全

干货|水表基础知识大全

第一部分 水表基础知识 第一节 水表的作用 水表:是用来记录流经自来水管道中水量的一种计量器具,也称为计量器具。 1、水表的发展简史 1825年英国的克路斯发明了真正具有仪表特征的平衡罐式水表以来&#xff0c;水表的发展已有近二百年的历史。期间&#xff0c;水表的结构…
阅读更多...
SystemVerilog基础：并行块fork-join、join_any、join_none（一）

SystemVerilog基础：并行块fork-join、join_any、join_none（一）

相关阅读 SystemVerilog基础https://blog.csdn.net/weixin_45791458/category_12517449.html?spm1001.2014.3001.5482 有关Verilog中顺序块和并行块的相关内容已经在之前的Verilog基础的文章讲过&#xff0c;如下所示。 Verilog基础&#xff1a;块语句https://blog.csdn.net…
阅读更多...
11、pytest断言预期异常

11、pytest断言预期异常

官方用例 # content of test_exception_zero.py import pytestdef test_zero_division():with pytest.raises(ZeroDivisionError):1/0# content of test_exception_runtimeerror.py import pytestdef test_recursion_depth():with pytest.raises(RuntimeError) as excinfo:def…
阅读更多...
MySQL基础『数据类型』

MySQL基础『数据类型』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; MySQL 学习 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 &#x1f381;软件版本&#xff1a; MySQL 5.7.44 文章目录 1.数据类型一览2.整型2.1.INT2.2.BIT 3.浮点数3.1.FLOAT3.2.DECIMAL3…
阅读更多...
紫龙游戏解锁Jira与Perforce的游戏开发行业实践

紫龙游戏解锁Jira与Perforce的游戏开发行业实践

近日&#xff0c;在龙智携手Atlassian与JFrog共同举办的“大规模开发创新&#xff1a;如何提升企业级开发效率与质量”的线下研讨会中&#xff0c;紫龙游戏上海研发中心高级项目管理主管叶凯威为大家带来了精彩演讲&#xff0c; 分享紫龙游戏的项目管理工具与流程&#xff0c;以…
阅读更多...
将数据库配置迁移nacos报错：Request nacos server failed:

将数据库配置迁移nacos报错：Request nacos server failed:

网上查了很久大部分都是版本不一致导致造成&#xff0c;但是没迁移的时候就可以&#xff0c;为啥迁移了就不行了呢&#xff1f; 最后排查发现&#xff1a;application.yml文件我注释掉的数据库配置 多注释了一个Spring开头
阅读更多...
学SQL JOINS看这一篇文章就够了

学SQL JOINS看这一篇文章就够了

目录 下面以实例进行分析 内连接 inner join 或者join&#xff08;等同于inner join&#xff09; 外连接 left join 或者left outer join(等同于left join) [ left join 或者left outer join(等同于left join) ] [ where B.column is null ] right join 或者right outer…
阅读更多...
【有ISSN、ISBN号！往届均已完成EI检索】第三届电子信息工程、大数据与计算机技术国际学术会议（EIBDCT 2024）

【有ISSN、ISBN号！往届均已完成EI检索】第三届电子信息工程、大数据与计算机技术国际学术会议（EIBDCT 2024）

第三届电子信息工程、大数据与计算机技术国际学术会议&#xff08;EIBDCT 2024&#xff09; 2024 3rd International Conference on Electronic Information Engineering, Big Data and Computer Technology 第三届电子信息工程、大数据与计算机技术国际学术会议&#xff08;…
阅读更多...
广告公司选择企业邮箱的策略与技巧

广告公司选择企业邮箱的策略与技巧

对于广告公司而言&#xff0c;选择一款适合的企业邮箱不仅能提升工作效率&#xff0c;更能维护并强化公司的品牌形象。以下是在选择企业邮箱时需关注的关键因素和注意事项。 1、邮件服务商的安全性。 邮件服务商应具备严密的安全防护措施&#xff0c;包括反垃圾邮件、防病毒、防…
阅读更多...
macOS安装JDK8

macOS安装JDK8

在这篇博客的基础上进行补充。 https://blog.csdn.net/Sarah_luxy/article/details/128797756 百度搜索jdk8&#xff0c;选择官网进入 下载需要注册账户&#xff0c;提前注册登录 进入到Java SE中 选择下载 选择java归档&#xff0c;在历史版本里找jdk8 下拉找到jdk8 选…
阅读更多...
老化房设备材料选型要素

老化房设备材料选型要素

一&#xff1a;选择高温老化试验设备时&#xff0c;需要考虑以下几个因素&#xff1a; 温度范围&#xff1a;根据待测材料或产品的使用环境和需求&#xff0c;选择合适的温度范围。确保试验设备的最高和最低温度能够满足需求。控温精度&#xff1a;控温精度越高&#xff0c;试…
阅读更多...
Flink运行时架构核心概念

Flink运行时架构核心概念

Flink运行时架构 JobManager&#xff1a;协调&#xff0c;决定何时调度下一个task&#xff0c;对失败任务做恢复。 ResourceManager: 负责Flink集群中的资源提供、回收、分配&#xff0c;它负责管理task slot。standalone模式下&#xff0c;不能自行启动新的taskmanagerDispatc…
阅读更多...
Linux DataEase数据可视化分析工具本地部署与远程访问

Linux DataEase数据可视化分析工具本地部署与远程访问

文章目录 前言1. 安装DataEase2. 本地访问测试3. 安装 cpolar内网穿透软件4. 配置DataEase公网访问地址5. 公网远程访问Data Ease6. 固定Data Ease公网地址 前言 DataEase 是开源的数据可视化分析工具&#xff0c;帮助用户快速分析数据并洞察业务趋势&#xff0c;从而实现业务…
阅读更多...
新书推荐——《Copilot和ChatGPT编程体验：挑战24个正则表达式难题》

新书推荐——《Copilot和ChatGPT编程体验：挑战24个正则表达式难题》

《Copilot和ChatGPT编程体验&#xff1a;挑战24个正则表达式难题》呈现了两方竞争的格局。一方是专业程序员David Q. Mertz&#xff0c;是网络上最受欢迎的正则表达式教程的作者。另一方则是强大的AI编程工具OpenAI ChatGPT和GitHub Copilot。 比赛规则如下&#xff1a;David编…
阅读更多...
最新文章

Copyright @ 2022~2023