Framework/Next.js

[Next.js] nextjs ๋ทฐํฌ์ธํŠธ(Viewport) ์„ค์ • ๋ฐฉ๋ฒ•

yuri lee 2023. 4. 18. 23:10
๋ฐ˜์‘ํ˜•

Intro

์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ์‹œ๊ฐ„์—๋Š” Next.js์—์„œ Viewport(๋ทฐํฌ์ธํŠธ)๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 

 

How to apply viewport in nextjs

_document.js ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜์—ฌ ์•„๋ž˜์™€ ๊ฐ™์ด ์ „์ฒด ํŽ˜์ด์ง€์— meta ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. 

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
๋ฐ˜์‘ํ˜•

'Framework > Next.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Next.js + React] yarn berry ์ œ๊ฑฐ ๋ฐฉ๋ฒ•  (0) 2024.09.22
[Next.js] Next์˜ Link์™€ MUI(Material-UI)์˜ Link ์ฐจ์ด  (0) 2023.05.03
[Next.js & React] ํ”„๋กœ์ ํŠธ ์‹œ๊ฐ„ ํŽ˜์ด์ง€ ์‚ฌ์ „ ๋ Œ๋”๋ง & ๋ฐ์ดํ„ฐ ํŽ˜์นญ  (0) 2022.11.22
[Next.js & React] ํŽ˜์ด์ง€ ์‚ฌ์ „ ๋ Œ๋”๋ง & ๋ฐ์ดํ„ฐ ํŽ˜์นญ  (1) 2022.11.21
[Next.js & React] ํŒŒ์ผ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ… ์ž‘์—…ํ•˜๊ธฐ  (0) 2022.11.13

'Framework/Next.js'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[Next.js] nextjs ๋ทฐํฌ์ธํŠธ(Viewport) ์„ค์ • ๋ฐฉ๋ฒ•

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”