문제
- 수정한 favicon과 title이 적용되지 않음
- 파일명을 바꾸어 새로 배포했으나, 이전 파일명으로 로딩 됨
해결
- favicon 적용
- 브라우저 캐시로 인해 바뀌지 않았던 것
- 크롬에서
cmd+shift+R #mac OR ctrl+shift+R # windows/Linux새로고침
- title 적용
- favicon과 달리 title은 초기에 지정한 이름이 나타나다가 페이지가 렌더링되면서 제목이 주소 그 자체로 바뀌는 현상이 이어졌다.
- 원인은 초기에 title 태그 값이 있지만, JS가 실행되면서 내용이 변경될 수 있다고 한다.
- React, Vue, Angular, Next.js와 같은 JS 프레임워크나 라이브러리를 사용하는 싱글 페이지 애플리케이션(SPA)에서 흔히 볼 수 있는 현상이라고 한다.
import '../styles/globals.css';
import Head from 'next/head';
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';
export default function App({ Component, pageProps }: AppProps) {
return (
<ThemeProvider attribute="class">
<Head>
<title>한유진 포트폴리오</title>
</Head>
<Component {...pageProps} />
</ThemeProvider>
);
}_app.js 에서 전역 타이틀을 설정해주었다.
만약 페이지마다 다른 타이틀을 적용하고 싶다면 <Head> 컴포넌트를 각각의 페이지 컴포넌트에 임포트하여 사용하면 된다.
잘 적용된 모습!
- 이전 파일명으로 계속 적용되는 문제 또한
.firebase의 캐시를 모두 삭제하고 올바른 경로로 빌드 후 배포하니 해결되었다. (SSG output:export)
참고
꾸준히 나아가는 프론트엔드 개발자