next初体验

news2024/11/23 14:01:11

next的好处

创建项目

npm init next-app app-test

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

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

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

静态资源使用：将静态资源放在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() {}

这样才起作用。