๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- React, Next.js

[์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js] Next.js์—์„œ head ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฉ‹์ง„ ๋ฐฉ๋ฒ•

by Wonit 2020. 12. 29.

ํ•ด๋‹น ๋ธ”๋กœ๊ทธ ์‹œ๋ฆฌ์ฆˆ๋Š” ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next js ์‹œ๋ฆฌ์ฆˆ๋กœ์จ ์ด 10๋ถ€์ž‘์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
Next.js๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ ์ด์•ผ๊ธฐํ•˜๋Š” ๋‚ด์šฉ์„ ์ตœ๋Œ€ํ•œ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ  ์ง๊ด€์ ์ด๊ฒŒ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

0. ๋ชฉ์ฐจ

1. create-next-app์œผ๋กœ next ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๊ธฐ

2. create-next-app์—์„œ ๋งŒ๋‚œ ์ฒซ ๋ฒˆ์งธ ํ•ต์‹ฌ pages. ๊ทธ๋ฆฌ๊ณ  ๋™์  ๋ผ์šฐํŒ…

3. ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ Link-Component ๊ทธ๋ฆฌ๊ณ  Pre-Fetch

Dynamic Routing๊ณผ Link๋ฅผ ์ด์šฉํ•ด ๊ฐ„๋‹จํ•œ ๊ฒŒ์‹œํŒ์„ ๋งŒ๋“ค์–ด๋ณด์ž.

4. Next.js์—์„œ head ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฉ‹์ง„ ๋ฐฉ๋ฒ•

๋ฒˆ์™ธ & ์‹ค์Šต) ์ด๋ฏธ์ง€์™€ ๋™์˜์ƒ์„ ์ €์žฅํ•˜๊ณ  ์‚ฌ์šฉํ•ด๋ณด์ž.

5. ์›น์˜ ๋ฐœ์ „ ๊ณผ์ •์œผ๋กœ ๋ณด๋Š” SSG์™€ SSR

6. next์˜ ๋‘ ๋ฒˆ์งธ ํ•ต์‹ฌ Pre-Rendering

7. SSG๋กœ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” ๋…ธ๋ฆฌ๊ธฐ

8. ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋งˆ์น˜๋ฉฐ..


HTML title ํƒœ๊ทธ

์šฐ๋ฆฌ๋Š” ๋งŽ์€ ์–‘์˜ ์›น์„ ๋„์›Œ๋†“๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์šฐ๋ฆฌ๊ฐ€ ์–ด๋–ค ์›น์‚ฌ์ดํŠธ์— ๋“ค์–ด๊ฐ”๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด ์žˆ๋‹ค.

 

๋ฐ”๋กœ html ์˜ title ํƒœ๊ทธ.

 

์ด๋Ÿฐ title ํƒœ๊ทธ๋Š” head ํƒœ๊ทธ ๋‚ด๋ถ€์— ์กด์žฌํ•˜๋Š”๋ฐ, ์ด๋Ÿฐ ํƒœ๊ทธ๋“ค์„ Metadata Contents๋ผ๊ณ  ํ•œ๋‹ค

 

๊ฒ€์ƒ‰ ์—”์ง„์€ ์ด Metadata๋ฅผ ์ด์šฉํ•ด์„œ ํ•œ ๋ˆˆ์— ํ•ด๋‹น ํŽ˜์ด์ง€๋Š” ์–ด๋–ค ์ •๋ณด๋ฅผ ๋‹ด๋Š” ํŽ˜์ด์ง€์ธ์ง€ ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ๋ณด์—ฌ์ค€๋‹ค.

 

metadata

 

์ด๋Ÿฐ metadata๋“ค์€ Search Engine Optimize์— ์ค‘์š”ํ•œ ์š”์†Œ๊ฐ€ ๋˜๋œ๋‹ค.

 

๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ create-react-app์—์„œ title์„ ๋ณ€๊ฒฝํ•œ๋‹ค๊ณ  ํ•ด๋ณด์ž.

 

  • ๊ทธ๋Ÿผ ์šฐ๋ฆฌ๋Š” ์šฐ์„  index.hmtl ํŒŒ์ผ์„ ์ฐพ์„ ๊ฒƒ์ด๋‹ค.
  • ๊ทธ๋ฆฌ๊ณ  <head><head> ํƒœ๊ทธ ๋‚ด์— ์žˆ๋Š” <title></title> ํƒœ๊ทธ๋ฅผ ๋ฐ”๊พผ๋‹ค.

ํ˜น์€

  • npm ์œผ๋กœ react-helmet ์„ ์„ค์น˜ํ•œ๋‹ค.
  • react-helmet์„ ์ด์šฉํ•ด์„œ ๋ณ€๊ฒฝํ•œ๋‹ค.

๊ทธ๋Ÿผ create-next-app์—์„œ ๋ฐ”๊พผ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ณด์ž.


index.html ํŒŒ์ผ์„ ์ฐพ์œผ๋ ค๊ณ  ํ•ด๋„ ๋ณด์ด์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค.


๊ทธ๋ ‡๋‹ค.


nextjs๋Š” create-react-app๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ index.html ํŒŒ์ผ์ด ์—†๋‹ค.

 

๊ทธ๋ž˜์„œ next์—์„œ๋Š” <head> ํƒœ๊ทธ ๋‚ด์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์ด ๋”ฐ๋กœ ์žˆ๋‹ค.

Head ์ปดํฌ๋„ŒํŠธ

๋งŒ์•ฝ ๊ฒŒ์‹œํŒ์„ ๋งŒ๋“ ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.

๊ทธ๋Ÿผ ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€์„ ํด๋ฆญํ•ด์„œ ๋“ค์–ด๊ฐˆ ๋•Œ ๋งˆ๋‹ค ์ƒ๋‹จ ํƒญ์˜ ๋‚ด์šฉ์€ ๊ฒŒ์‹œํŒ์˜ ์ œ๋ชฉ์œผ๋กœ ๋ฐ”๋€Œ์–ด์•ผ ํ•œ๋‹ค๋Š” ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ ๋‹ค๊ณ  ํ•˜๋ฉด next.js ๊ฐ€ ๊ฐ–๊ณ ์žˆ๋Š” <Head> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

import Head from 'next/head'

๊ทธ๋ฆฌ๊ณ  ์œ„์—์„œ ๊ฐ€์ •ํ•œ ๊ฒŒ์‹œํŒ์€ ์•„๋งˆ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๋ฅผ ๋„๊ณ  ์žˆ์„ ๊ฒƒ์ด๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  meta ํƒœ๊ทธ๋ฅผ viewport๋„ ์ง€์ •ํ•ด๋ณด์ž.

import Head from "next/head";

export default function Post({post}) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.description}</>
    </>
  );
}

๊ทธ๋ฆฌ๊ณ  ์˜คํ”ˆ ๊ทธ๋ž˜ํ”„๋ฅผ ์ด์šฉํ•ด์„œ sns์— url์„ ์˜ฌ๋ฆฌ๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ๊ฐ€ ๊ฐ€๋Šฅํ•œ Open Graph ๋ฉ”ํƒ€ ์„ค์ •๋„ next๊ฐ€ ์ œ๊ณตํ•˜๋Š” <Head> ์ปดํฌ๋„ŒํŠธ ํ•˜๋‚˜๋กœ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋Œ“๊ธ€