Next.js는 정적 파일을 제공합니다. 'public'아래에 있는 폴더를 이용하면 됩니다. 'public'폴더 아래에 있는 파일들은 '/'을 통해 접근 가능합니다.
import type { ReactElement } from "react";
import type { NextPageWithLayout } from "../_app";
import styles from "../../scss-styles/HomePage.module.scss";
import Image from "next/image";
import profilePic from "../../public/happy.jpg";
const Home: NextPageWithLayout = () => {
return (
<div className={styles.homePageOuterContainer}>
<h1>My Homepage</h1>
<Image
src="/happy.jpg"
// src={profilePic}
alt="Picture of the author"
width="200px"
height="300px"
></Image>
<p>Welcome to my homepage</p>
</div>
);
};
export default Home;
이 폴더는 또한 robots.txt나 favicon.ico를 사용할 매우 중요하게 사용되어 질 수 있습니다.
또한 public이라는 이름은 바뀌어 질 수 없습니다.
'Web > NextJs' 카테고리의 다른 글
Next.js - Dynamic Routes ( TODO ) (0) | 2022.03.03 |
---|---|
Next.js - with Redux thunk (0) | 2022.03.01 |
Next.js - Font Optimization (0) | 2022.02.25 |
Next.js - Image Optimization (0) | 2022.02.25 |
Next.js - useSWR (0) | 2022.02.25 |