728x90
프로젝트 시작을 app router가 안정적이지 않을 때 시작했다.
그래서 pages 폴더 구조를 가지고 있는데 파비콘 설정 및 타이틀 태그 설정법이 잘 안보여서 글을 올린다.
각 페이지별 설정도 있지만 간단한 프로젝트용으로 전역적인 파비콘설정이 필요한 경우 아래와 같이 적용하면 된다.
- 꼭 next/head에서 불러온 Head를 사용해야한다.
- icon(favicon) 경로는 public이 자동으로 기준이 되있기 때문에 그아래 경로부터 적으면 된다.
전체코드
import "@styles/globals.css";
import "@styles/quill.css";
import type { AppProps } from "next/app";
import { Noto_Sans, Source_Serif_4 } from "next/font/google";
import CssBaseline from "@mui/material/CssBaseline";
import SantiagoLayout from "@components/layout/SantiagoLayout";
import Head from "next/head";
const notoSans = Noto_Sans({
subsets: ["latin"],
display: "swap",
weight: ["500", "400", "300"],
});
const sourceSerif = Source_Serif_4({
subsets: ["latin"],
display: "swap",
weight: ["400", "300"],
variable: "--source_Serif_4",
});
export const cls = (...classnames: string[]) => {
return classnames.join(" ");
};
// <className={`${notoSans.variable} font-serif`}>
export default function App({ Component, pageProps }: AppProps) {
return (
<main className={cls(notoSans.className, sourceSerif.variable)}>
<CssBaseline />
<SantiagoLayout>
<Head>
<title>Santiago</title>
<meta property="og:title" content="Santiago" key="title" />
<link rel="icon" href="/images/favicon.svg" />
</Head>
<Component {...pageProps} />
</SantiagoLayout>
</main>
);
}
728x90
반응형
'Next.js (pages router)' 카테고리의 다른 글
| Next.js Image 사진 비율 안깨지게 하는 법 | object-fit cover (0) | 2024.03.20 |
|---|---|
| next.js grid, map 안의 background image 최적화 및 글자 위에 보이기 | pages router (2) | 2024.02.08 |
| next.js | react.js 매거진 리스트 데이터 패칭 문제 해결 (0) | 2023.12.14 |
| Next, React api url 삼항연산자로 편리하게 사용하기 (0) | 2023.12.09 |