Layouts / Styling
public
정적 리소스를 NextJS로 서빙하기 위한 디렉토리
특정한path를 주지않고 사용 가능하다.
- robots.txt
웹에 대한 정보들을 읽어가는 크롤러들이 어떤 파일을 읽어가고 어떤파일은 읽어가면 안된다 라는 것을 정의해 놓은 파일이다. - image
등을 넣을 수 있다.
Image Component
img 라는 태그가 있지만 NextJS에서 제공하는 Image가 있다
a와 Link같은 존재이다
img
<img src="/images/profile.jpg" alt="프로필 이미지" />NextJS에서 제공하는 Image
<Image src="/images/profile.jpg" width={140} height={140} alt="프로필 이미지" />Image 태크도 Link와 같이 VIewPort에 들어갔을때 데이터를 로드한다
Image컴포넌트를 사용할때에는 width와 height를 입력해주어야 한다 그 이유는 CLS(Cumulative Layout Shift)를 최대한 없애는게 목적이다.
Layout
공통 컴포넌트로 만들고
./layout.module.css 라는 CSS모듈
component 폴더에 layout.module.css 파일을 만든다
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}그리고 Layout.tsx에서 불러온다
- Layout.tsx
import React from "react";
import s from "./layout.module.css";
const Layout = ({ children }: any) => {
return (
<div>
<main className={s.container}>{children}</main>
</div>
);
};
export default Layout;
- _app.tsx
import "../styles/globals.css";
import Layout from "./components/Layout";
export default function App({ Component, pageProps }: any) {
const getLayout =
Component.getLayout || ((page: any) => <Layout>{page}</Layout>);
return getLayout(<Component {...pageProps} />);
}
- firstPost.tsx
import Head from "next/head";
import React from "react";
const firstPost = () => {
return (
<>
<Head>
<title>첫번쨰 글</title>
</Head>
<div>firstPost</div>
</>
);
};
export default firstPost;
Style은 우선 NextJS따라 했다
https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout
rnrnrnr