VScode简写
rfc =>直接export 元件rfce =>export default 元件名称
nextJS设定jsconfig设定后可简化路径
{
"compilerOptions": {
"paths": {
"@/*": ["./*"],
//底层路径
"@component/*": ["./component/*"]
//其他路径
}
}
}
//范例
import \'@/public/css/index.scss\';
nextJS基本插入
import Script from \'next/script\';
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() => console.log(`脚本正确地载入，window.FB 已被定义`)}
/>
//安装插件
import Link from \'next/link\';
//切换路由
import Head from \'next/head\';
<Head>
<link rel="icon" href="/favicon.ico" />
</Head>
//Head Tag补充
开头写\'use client\'才能使用hook
layout.js布局每层都可以有layout，loading、error都可在此额外设定，最外层一定要有html与body tag
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] })
export default function RootLayout({ children }) {
//解构children
return (
<html lang="en">
<body className={inter.className}>
//引入google字体并使用
<Header />
<main>{children}</main>
</body>
</html>
);
}
meta设定
export const metadata = {
title: "标题",
description: "叙述",
};