next初体验

news2024/12/24 8:43:12

next的好处

创建项目

npm init next-app app-test

每次都会使用最新的creat-next-app去创建最新版本的项目

这里新版本的路径有所区别:他多了一个app的文件夹。

  • 兼容老项目我们可以在app文件夹的同级增加pages目录,然后创建页面。
  • 新项目可以直接在app下创建,但必须要有一个page.jsx或者.js

  1. 静态资源使用: 将静态资源放在public文件中,访问的时候直接
public/image/1.png => /image/1.png

引入默认导出的组件时需要注意,不能使用{}导出,否则会报错。

像这样写

import { Head } from "next/head"

vscode自动引用可能会出错

import { Head } from "next/document"

正确应该使用

import  Head  from "next/head"

export default function Page() {
    return (
        <div>
            <Head>
                <title>My page title</title>
            </Head>
            你好啊
        </div>
    )
}

老版本中上面这样其作用。

新版本中

next js head title not working

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

这样才起作用。

3. 通过Head 中加Link标签引入本地样式文件

4. 全局样式

  1. 老版本使用

有数据静态生生成不生成HTML文件,

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

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

相关文章

网络层 --- IP协议

目录 1. 前置性认识 2. IP协议 3. IP协议头格式 3.1. 4位版本 3.2. 4位首部长度 3.3. 8位服务类型 3.4. 16位总长度 3.5. 8位生存时间 TTL 3.6. 8位协议 3.7. 16位首部检验和 3.8. 32位源IP和32位目的IP 4. 分片问题 4.1. 为什么要分片 4.2. 分片是什么 4.2.1. …

进迭时空宣布开源RISC-V芯片的AI核心技术

仟江水商业电讯&#xff08;4月29日 北京 委托发布&#xff09;4月29日&#xff0c;在“创芯生生不息——进迭时空2024年度产品发布会”上&#xff0c;进迭时空CEO、创始人&#xff0c;陈志坚博士宣布将开源进迭时空在自研RISC-V AI CPU上的核心技术&#xff0c;包括AI扩展指令…

根据txt文件绘制词云 -- python

根据一段文字绘制词云&#xff0c;我们有两种方法 &#xff0c;一种是登录专业的绘图网站http://yciyun.com/ 不过&#xff0c;貌似这个网站需要会员才可以体验&#xff0c;他只是给出了一些形状图案的词云&#xff0c;虽然看起来很精美&#xff0c;但是他不能让我们自己随意更…

看 周鸿祎、雷,那俩红、绿少年

导语&#xff1a;百战归来&#xff0c;他们成为了中国经济的新“发动机” 文 | 魏强 雷军、周鸿祎变成网红这事&#xff0c;已不仅是传播现象&#xff0c;也不是这两个老板为了卖车的卖力表演和吆喝&#xff0c;它俨然成了中国经济新一轮的“发动机”。 过去几年&#xff0c;因…

包 与 访问修饰符

1. 包 1.1 包的三大作用 1. 区分相同名字的类 2. 当类很多时,可以很好的管理类[看Java API文档] 3. 控制访问范围 1.2 包基本语法 package com.zakeau; 说明: 1. package关键字,表示打包. 2. com.zakedu : 表示包名 1.3 包的本质分析(原理) 包的本质实际上就是创建不同的…

Nuxt3 实战 (六):Footer 底部布局

前言 今天开发项目的 Footer 布局&#xff0c;这里我们参考 Nuxt-UI 官网的布局。 需求拆分 准备好域名备案号和 icp 图标底部社交按钮链接或其他链接布局组件开发 Footer 布局 新建 components/AppFooter.vue 文件&#xff1a; <template><footer class"f…

什么是编译与链接呢!

引言&#xff1a; 在ANSIC中存在两种编译环境 第一种是翻译环境&#xff1a;可以将环境中的源代码转换成能被机器执行的二进制指令&#xff1b;翻译环境即为我们所使用的编译器&#xff0c;可以将test.c文件翻译为test.exe文件 第二种是运行环境&#xff1a;它用于实际代码的…

LabVIEW 2024安装教程(附免费安装包资源)

鼠标右击软件压缩包&#xff0c;选择“解压到LabVIEW.2024”。 返回解压后的文件夹&#xff0c;鼠标右击“ni_labview-2024”选择“装载”。 鼠标右击“Install”选择“以管理员身份运行”。 点击“我接受上述2条许可协议”&#xff0c;然后点击“下一步”。 点击“下一步”。 …

Docker容器中安装vim

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 Docker 是一个开源…

uni-app中配置自定义条件编译

前提&#xff1a;官网提供的自定义编译不满足条件 package.json | uni-app官网 下文&#xff1a;不详细写&#xff0c;主要写关键思路 package.json文件 主要看scripts的执行命令&#xff0c;其他依赖就是用vue-cli方式创建uni-app项目生成的 {"name": "un…

计算机组成实验(5)

一、实验目的和要求 1.1 实验目的 1. 复习二进制加减、乘除的基本法则 2. 掌握补码的基本原理和作用 3. 了解浮点数的表示方法及加法运算法则 4. 进一步了解计算机系统的复杂运算操作 1.2 实验要求 1. 熟悉二进制原码补码的概念,了解二进制加减乘除的原理与操作实现。 …

部署YUM仓库和NFS共享存储服务

目录 1. YUM仓库服务 1.1 YUM概述 1.2 准备安装源 1.3 yum在线源替换方法 2.制作YUM源 2.1制作ftp源 3.yum软件包的下载方式 4.NFS共享存储服务 4.1 NFS 4.2 NFS网络文件系统 4.3 NFS配置 1. YUM仓库服务 1.1 YUM概述 yum是一个基于RPM包&#xff08;是Red-Ha…

AI与新能源催生新增长,电子制造业如何提升预测力与连接力?

国产替代和新基建带来的结构性机遇&#xff0c;AI和新能源汽车行业的增长所带来的需求提升&#xff0c;都给电子制造行业以乐观的理由。但是&#xff0c;不少企业的客户经营管理、供需平衡与供应链协同等所面临的挑战仍在&#xff0c;如何为行业高质量增长持续注入动能&#xf…

Mycat(三)读写分离双主双从

文章目录 搭建双主双从双主机配置双从机配置双从配置两个主机互相复制停止从服务复制功能重新配置主从 修改 Mycat 的集群配置实现多种主从双主双从集群角色划分增加两个数据源修改集群配置文件读写分离配置扩展&#xff08;1&#xff09;读写分离(一主一从,无备)(m是主,s是从)…

不同规模企业如何进行系统集成?

摘要&#xff1a;系统集成作为企业信息化建设的重要组成部分&#xff0c;其实施策略和方法在不同规模的企业中存在着显著的差异。以下是针对小型、中型、大型企业在系统集成方面所做的六点深度对比&#xff1a; 1. 集成需求复杂度 •小型企业&#xff1a;系统集成需求相对简单…

Stable Diffusion教程:文生图

最近几天AI绘画没有什么大动作&#xff0c;正好有时间总结下Stable Diffusion的一些基础知识&#xff0c;今天就给大家再唠叨一下文生图这个功能&#xff0c;会详细说明其中的各个参数。 文生图是Stable Diffusion的核心功能&#xff0c;它的核心能力就是根据提示词生成相应的…

kali打镜像教程

用户名&#xff1a;kali 密码&#xff1a;kali 去如下网站下载kali镜像http://2.https://www.kali.org/get-kali/#kali-live 2.使用制作镜像工具制作镜像&#xff0c;格式化U盘制作为启动盘&#xff0c;下面是选择格式化哪个u盘 https://pan.baidu.com/s/1r7b3KynfWASqM-2B…

IDEA调试远程服务器项目

IDEA调试远程服务器项目(IDEA) 一、使用场景 1.很多时候&#xff0c;大家在本地开发项目&#xff0c;测试都没有问题。 2.部署服务器后&#xff0c;可能是因为服务的器的原因&#xff0c;或者网络原因等等&#xff0c;难免会出现一点点意向不到的问题。 3.本地又无法复现&…

C++实现高性能并行计算——1.pthreads并行编程(上)

系列文章目录 pthreads并行编程(上)pthreads并行编程(中)pthreads并行编程(下)使用OpenMP进行共享内存编程 文章目录 系列文章目录前言一、PthreadsPthreads 库的主要特性包括&#xff1a; 二、Hello World程序2.1 准备工作2.2 启动线程2.3 运行线程2.3.1 线程函数 2.4 停止线…

win10 配置OpenCV LNK2019 无法解析的外部符号 “void __cdecl cv::imshow

1 遇到问题 严重性 代码 说明 项目 文件 行 禁止显示状态 详细信息 错误 LNK2019 无法解析的外部符号 “void __cdecl cv::imshow(class std::basic_string<char,struct std::char_traits,class std::allocator > const &,class cv::debug_build_guard::_InputArray…