1. Assets
1.1 public ๋๋ ํ ๋ฆฌ
- ์ ์ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ ๊ฒฝ์ฐ ์ต์์ ๋๋ ํ ๋ฆฌ์ public ๋ฅผ ์ด์ฉํ๋ฉด ๋ฉ๋๋ค.
- ์ด๋ฏธ์ง ๊ฒฝ๋ก๋ public ํด๋๊ฐ / ๋ก ๋งค์นญ ๋ฉ๋๋ค.
<img src="/images/profile.jpg" alt="Your Name" />1.2 ์ต์ ํ ๋์ง ์์ ์ด๋ฏธ์ง
<img src="/images/profile.jpg" alt="Your Name" />๊ทธ๋ฌ๋, ์ผ๋ฐ HTML ์ img ๋ฅผ ์ฌ์ฉํ๋ฉด ์๋์ ์ํฉ๋ค์ ์๋์ผ๋ก ์ฒ๋ฆฌํด์ผ ํฉ๋๋ค.
- ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ด๋ฏธ์ง๊ฐ ๋ฐ์ํ์ผ๋ก ์ ์ฉ๋๋์ง
- ๋ค๋ฅธ ํด ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ด๋ฏธ์ง ์ต์ ํ
- ๋ทฐํฌํธ์ ๋ค์ด๊ฐ ๋๋ง ์ด๋ฏธ์ง ๋ก๋ ๋ฑ ...
ํ์ง๋ง, Next.js ๋ Image ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ฆ์ ์ฌ์ฉ ํ ์ ์๋ ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํฉ๋๋ค.
1.3 Image Component - ์ด๋ฏธ์ง ์๋ ์ต์ ํ
Next.js ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ด๋ฏธ์ง ์ต์ ํ๋ ์ง์ ํฉ๋๋ค.
- ์ด๋ฏธ์ง ํฌ๊ธฐ ์กฐ์ , ์ต์ ํ์ ์ต์ ์ด๋ฏธ์ง ํฌ๋ฉง (WebP) ๋ฅผ ์ ๊ณต
- ์์ viewport ์ ๊ธฐ๊ธฐ์์ ํฐ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฒ์ ๋ฐฉ์ง
- ์๋์ผ๋ก ์ด๋ฏธ์ง ํฌ๋งท์ ์ ํํ๊ณ ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์ ๊ฐ๋ฅํ ํฌ๋งท์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์ ๊ณต
- ์ด๋ฏธ์ง๋ ๊ธฐ๋ณธ์ ์ผ๋ก Lazy Loading( ์ง์ฐ ๋ก๋ฉ ) ๋ฉ๋๋ค.
- ์ฆ, ๋ทฐํฌํธ ๋ฐ์ ์ด๋ฏธ์ง๋ ํ์ด์ง ์๋์ ์ํฅ์ ์ฃผ์ง ์์ต๋๋ค.
์ด๋ฏธ์ง๋ ๋ทฐํฌํธ๋ก ์คํฌ๋กค ๋ ๋ ๋ก๋ ๋ฉ๋๋ค.
Next.js๋ ๋น๋ ์ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ๋ ๋์ ์ฌ์ฉ์๊ฐ ์์ฒญํ ๋ on-demand ๋ก ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํฉ๋๋ค.
์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ ๋ฐ ์ ์ ์ ์ฉ ์๋ฃจ์ ๊ณผ ๋ฌ๋ฆฌ 10๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ์กํ๋ 1์ฒ๋ง ๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ์กํ๋ ๋น๋ ์๊ฐ์ด ์ฆ๊ฐํ์ง ์์ต๋๋ค.
import Image from 'next/image';
const YourComponent = () => (
<Image
src="/images/profile.jpg" // Route of the image file
height={144} // Desired size with correct aspect ratio
width={144} // Desired size with correct aspect ratio
alt="Your Name"
/>
);1.4 ๋น๊ต
<img src = "/images/profile.jpg" alt="1" />
vs
<Image src ="/images/profile.jpg" width={144} height={144} alt="1"/>
์ฐจ์ด์ ์ ??
Next.js ์์ ์ ๊ณตํ๋ Image ๋ฅผ ํ์ฉํ๋ฉด,
- ๊ธฐ์กด ์ด๋ฏธ์ง ํ์ผ ํ์์ด ์์ ํ ๋ฌ๋ผ์ง๋๋ค.
- webp ๋ผ๋ ์ด๋ฏธ์ง์ ํฌ๋งท์ธ๋ฐ jpg ๋ณด๋ค ํจ์ฌ ๋ ๊ฐ๋ณ๊ฒ, ๋์ผ ํน์ ๋ ์ข์ ํด์๋์ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ํฌ๋งท ์ ๋๋ค.
- ์ด๋ฏธ์ง Lazy load ๊ธฐ๋ฅ
์ฒ์์ ๋ชจ๋ ๋ฆฌ์์ค๋ฅผ ๋ฐ์ง ์๊ณ , ๋ณด์ด๋ ์์ ์์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์์ต๋๋ค.
๊ถ๊ทน์ ์ธ ๋ชฉํ๋ CLS ( Cumulative Layout Shift ) : ๋์ ๋ ์ด์์ ์ด๋
์ปดํฌ๋ํธ๊ฐ ์๋ค๊ฐ ์๊ธฐ๊ฑฐ๋, ์ฌ์ด์ฆ๊ฐ ๋ฐ๋๊ฑฐ๋, ์ปดํฌ๋ํธ์ ๋ณ๊ฒฝ์ผ๋ก ์ธํด Dom Tree ์์๋ ์์๋ค์ ๋ค์ ๋ ๋๋ง ๋๋ ๊ฒ์ ์ต๋ํ ์ค์ด๋ ๊ฒ
2. Meta data
<title> HTML ํ๊ทธ ์ ๊ฐ์ ํ์ด์ง์ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๋ฐฉ๋ฒ
- Head ์ปดํฌ๋ํธ ๋ฅผ ์ ๊ณต ํฉ๋๋ค.
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage- ํ๊ทธ๊ฐ ์ค๋ณต๋์ง ์๋๋ก
key๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ ์์์ ๊ฐ์ด ํ๊ทธ๊ฐ ํ ๋ฒ๋ง ๋ ๋๋ง ๋ฉ๋๋ค.
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta property="og:title" content="My page title" key="title" />
</Head>
<Head>
<meta property="og:title" content="My new title" key="title" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage- ์ด ๊ฒฝ์ฐ ๋ ๋ฒ์งธ๋ง๋ ๋๋ง ๋ฉ๋๋ค.
- https://nextjs.org/docs/api-reference/next/head
3. CSS
Next.js ๋ CSS ๋ฐ Sass ๊ฐ ๋ด์ฅ ๋์ด ์์ต๋๋ค.
3.1 styled-jsx
Next.js ์ ๋ด์ฅ ๋์ด ์์ต๋๋ค.
๊ธฐ๋ณธ ๋ฌธ๋ฒ
<>
<style jsx>{`
…
`}</style>
</><>
<div className="msg">Hello, World!</div>
// `(ํ
ํ๋ฆฟ ๋ฌธ์์ด)์ผ๋ก ๊ฐ์ธ์ง ์ฌ์ค์ ์ ์ํ์ธ์!
<style jsx>`
.msg {
font-size: 20px;
}
`</style>
</>
๊ธฐ๋ณธ์ ์ผ๋ก styled-jsx๋ ์ฌ์ฉ๋ ์ปดํฌ๋ํธ์๋ง ์ํฅ์ ๋ฏธ์น๋ฉฐ, ์คํ์ผ์ ์ ์ญ์ผ๋ก ํ์ฉํ๊ธฐ ์ํด์๋ global ์ด๋ผ๋ ์์ฑ์ ์ฌ์ฉํฉ๋๋ค.
<div>
<div className="msg">Hello, World!</div>
// ์คํ์ผ ํ๊ทธ์ global ์์ฑ์ ์ถ๊ฐํ๋ฉด
// ๋ค๋ฅธ ์ปดํฌ๋ํธ์ .msg ์์์๋ ์คํ์ผ์ ์
ํ ์ ์์ต๋๋ค.
<style jsx global>`
.msg {
font-size: 20px;
}
`</style>
</div>3.2 ์คํ์ผ ๊ฐ์ฒด
import css from "styled-jsx/css";
const style = css`
.top-wrap {
background-color: white;
height: 60px;
}
`;
export default function Top() {
return (
<>
<div className="top-wrap">
</div>
<style jsx>{style}</style>
</>
);3.3 ์คํ์ผ ๋ฐ์ธ๋ฉ
export default function Top() {
const [colorBind, setColorBind] = useState(true);
return (
<>
<div className="top-wrap">
</div>
<style jsx>{`
.top-wrap {
background-color: ${colorBind? "red": "blue"};
}
`}</style>
</>
);- ๋์ ์ผ๋ก ์คํ์ผ ๋ฐ์ธ๋ฉ์ด ๊ฐ๋ฅ ํฉ๋๋ค.
3.4 CSS ์์ฑ ๋ฐ import
Next.js ๋ CSS ์ Sass ๊ฐ ๋ด์ฅ๋์ด ์์ด์, .css ๋ .scss ๋ฅผ import ํ ์ ์์ต๋๋ค.
- ๋ชจ๋๋ก ์คํ์ผ๋ง ํ์ผ์ ๊ด๋ฆฌ ํ ์ ์์ต๋๋ค.
- Code Splitting ๋ CSS ๋ชจ๋์์๋ ์ ์ฉ ๋ฉ๋๋ค.
๋ชจ๋ : ํ๋ก๊ทธ๋จ์ ๊ธฐ๋ฅ์ ๋ ๋ฆฝ์ ์ธ ๋ถํ์ผ๋ก ๋ถ๋ฆฌํ ๊ฒ์ ๋ชจ๋์ด๋ผ๊ณ ํ๋ค.
์ผ๋ฐ์ ์ผ๋ก ์๋ธ๋ฃจํด๊ณผ ๋ฐ์ดํฐ ๊ตฌ์กฐ์ ์งํฉ์ฒด๋ก์, ๊ทธ ์์ฒด๋ก์ ์ปดํ์ผ ๊ฐ๋ฅํ ๋จ์์ด๋ฉฐ, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ๋์์ ์ฌ๋ฌ ๋ค๋ฅธ ๋ชจ๋์ ๊ฐ๋ฐ์ ์ฌ์ฉ๋ ์ ์๋ค. ์ถ์ฒ : ๋ค์ด๋ฒ
์ฆ, ํน์ ๊ธฐ๋ฅ๋ณ๋ก ๋๋์ด์ง๋ ํ๋ก๊ทธ๋จ ๋ฉ์ด๋ฆฌ ๋ผ๊ณ ์๊ฐ ํ ์ ์์ต๋๋ค.
components/layout.module.css
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}components/layoust.js
import styles from './layout.module.css'
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>
}์ฐธ๊ณ
'๐ Front-End > Next.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| Next.js - ๋ค๋ก๊ฐ๊ธฐ ํ ๋ ์ด์ ์คํฌ๋กค ์์น ์ ์ง (0) | 2022.12.21 |
|---|---|
| Dynamic Routes (0) | 2022.10.26 |
| Next.js - Link (0) | 2022.10.26 |
| Next.js - Routing (0) | 2022.10.26 |
| Next.js - Pre Rendering (0) | 2022.10.26 |
