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: "敘述",
};