본문 바로가기
Front-End

[Next.js] 230703 학습일기

승니 2023. 7. 8. 20:13

https://nextjs.org/learn/basics/create-nextjs-app/

 

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

 

1. 

You should keep the development server running, but if you want to restart it, hit Ctrl + c to stop the server.

 

Navigate between Pages

2. Pages in Next.js

Pages are associated with a route based on their file name. For example, in development:

  • pages/index.js is associated with the `/` route.
  • pages/posts/first-post.js is associated with the `/posts/first-post route.`

 

3. Link Component

When linking between pages on websites, you use the <a> HTML tag.

In Next.js, you can use the Link Component next/link to link between pages in your application. 

<Link> allows you to do client-side navigation and accepts props that give you better control over the navigation behavior.

 

No routing libraries are required.

 

 

The Link component is similar to using <a> tags, but instead of <a href="…">, you use <Link href="…">.

더보기 
// pages/index.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
import Link from "next/link";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className={styles.title}>
          Read <Link href="/posts/first-post">this page</Link>
        </h1>

        <p className={styles.description}>
          Get started by editing <code>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <img src="/vercel.svg" alt="Vercel" className={styles.logo} />
        </a>
      </footer>

      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
        }
      `}</style>

      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}
// pages/posts/first-post.js
import Link from "next/link";
export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

 

 

4. Client- side navigation

The Link component enables client-side navigation between two pages in the same Next.js app.

Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browser.

 

This is why we use <Link> instead of <a> tag.

 

In the case of using <a> tag, 

// pages/posts/first-post.js
import Link from "next/link";
export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <a href="/">Back to home</a>
      </h2>
    </>
  );
}

 

the background color will be cleared on link clicks because the browser does a full refresh

=> bad

 

Instead, we used <Link> tag.

Using <Link> tag,

// pages/posts/first-post.js
import Link from "next/link";
export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

This shows that the browser does not load the full page and client-side navigation is working.

 

 

** Note: If you need to link to an external page outside the Next.js app, just use an <a> tag without Link

 

 

5. Prefetching

In a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background.

By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant.

더보기

Q. 컴퓨터 과학에서 prefetch의 의미

A.

컴퓨터 과학에서 "prefetch"는 데이터나 명령어를 미리 가져와서 캐시에 저장하는 기술이나 메커니즘을 의미합니다. 이 기술은 처리 속도를 향상시키고 메모리 액세스 지연을 줄이는 데 도움이 됩니다.

프리페치는 일반적으로 CPU나 메모리 컨트롤러에서 사용되며, 다음에 실행될 데이터나 명령어를 예측하여 미리 메모리에서 가져와 캐시에 저장합니다. 이렇게 함으로써 CPU는 필요한 데이터를 미리 가져와서 처리할 수 있으므로, 데이터를 실제로 필요로 할 때까지 대기하지 않아도 됩니다. 이는 메모리 액세스 지연으로 인한 CPU의 대기 시간을 줄이고, 실행 속도를 향상시킵니다.

프리페치 기술은 CPU와 메모리 사이의 데이터 전송 성능을 향상시키는 데 큰 역할을 합니다. 그러나 예측이 잘못되거나 효과적이지 않은 경우, 불필요한 데이터를 가져와 캐시를 가득 채울 수 있으며, 오히려 성능을 저하시킬 수도 있습니다. 따라서 프리페치 알고리즘은 효율적인 예측과 데이터 패턴 분석을 기반으로 구현되어야 합니다.

프리페치는 다양한 수준에서 적용될 수 있으며, 하드웨어와 소프트웨어에서 지원되는 경우가 있습니다. 일부 프로세서는 하드웨어 프리페치 엔진을 내장하고 있어 자동으로 프리페치를 수행하며, 프로그래머는 명시적으로 프리페치 지시문을 사용하여 프리페치를 제어할 수도 있습니다.

 

 

Assets, Metadata, and CSS

6.

Next.js has built-in support for CSS and Sass.

 

더보기

Static Asset  vs Dynamic Asset

컴퓨터 과학에서 "static asset"과 "dynamic asset"은 웹 개발이나 웹 서비스에서 자주 사용되는 용어입니다.

"Static asset"은 웹 페이지나 애플리케이션에서 변하지 않는 파일을 의미합니다. 이러한 파일은 서버에서 제공되고, 클라이언트(웹 브라우저)에서 다운로드되어 사용됩니다. 대표적인 예로는 HTML 파일, CSS 파일, JavaScript 파일, 이미지 파일 등이 있습니다. 이러한 파일들은 클라이언트에 의해 다운로드된 후에는 변경되지 않으며, 여러 사용자에게 동일한 내용을 제공합니다. 일반적으로 브라우저는 이러한 정적 자산을 캐시에 저장하여 웹 페이지를 로드할 때 더 빠르게 접근할 수 있습니다.

 

반면에 "Dynamic asset"은 웹 페이지나 애플리케이션에서 동적으로 생성되거나 변경되는 내용을 포함하는 자원을 의미합니다. 이러한 자원은 서버 측에서 동적으로 생성되거나 데이터베이스와 상호 작용하여 사용자에게 맞춤형 콘텐츠를 제공합니다. 동적 자산에는 사용자가 제공한 데이터에 기반한 콘텐츠, 사용자 인터랙션에 따라 변경되는 정보, 서버에서 동적으로 생성되는 그래픽 등이 포함될 수 있습니다. 동적 자산은 요청 시에 서버에서 동적으로 생성되므로 클라이언트에게 항상 최신 정보를 제공할 수 있습니다.

 

정적 자산과 동적 자산은 서로 보완적인 역할을 수행합니다. 정적 자산은 브라우저 캐싱과 같은 기술을 활용하여 성능을 향상시키고, 동적 자산은 맞춤형 콘텐츠를 제공하고 사용자와 상호 작용하는 데 사용됩니다.

 

더보기

Metadata

 

"Metadata"는 일반적으로 데이터에 대한 정보를 설명하는 데이터를 의미합니다. 컴퓨터 과학에서 "metadata"는 데이터의 특성, 구조, 형식 등에 대한 정보를 포함하는 데이터를 가리킵니다.

"Metadata"는 일반적으로 정적인 정보로 간주됩니다. 예를 들어, 파일의 생성일, 크기, 확장자, 소유자 등은 파일의 metadata로 간주될 수 있습니다. 이러한 metadata는 파일이 생성되거나 변경되지 않는 한 일반적으로 변하지 않습니다.

그러나 동적인 환경에서, 특히 웹 개발에서, 일부 metadata는 동적으로 생성되거나 변경될 수도 있습니다. 예를 들어, 웹 페이지의 metadata는 동적으로 생성될 수 있으며, 이는 웹 페이지의 내용이 변경될 때마다 업데이트됩니다. 이러한 metadata는 보통 웹 서버나 서버 측 스크립트에서 생성되며, 사용자 요청에 따라 동적으로 변경됩니다. 예를 들어, 웹 페이지의 메타 태그에는 제목, 설명, 키워드 등의 정보가 포함될 수 있으며, 이러한 정보는 동적으로 생성되거나 업데이트될 수 있습니다.

따라서 metadata는 정적인 경우도 있지만, 일부 경우에는 동적으로 생성되거나 변경될 수 있습니다. 동적인 metadata는 주로 웹 개발이나 웹 서비스에서 활용되며, 사용자에게 최신 정보를 제공하거나 검색 엔진 등에서 웹 페이지를 적절하게 색인하는 데 도움이 됩니다.

 

 

Next.js can serve static assets, like images, under the top-level public directory.

Files inside public can be referenced from the root of the application similar to pages.

 

Next.js also has support for Image Optimization by default. This allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats

 

Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.

Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.

 

lazy loading에 대해서 간단히 설명을 드리면, 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다. 예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것이죠.

 

출처: https://fe-developers.kakaoent.com/2022/220714-next-image/

 

// pages/posts/first-post.js
import Link from "next/link";
import Image from "next/image";

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <ImageComponent />
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

const ImageComponent = () => (
  <Image src="/images/profile.jpg" height={144} width={144} alt="Your Name" />
); 
//여기서 소괄호인 것 주의. Not curly Bracket
// curly bracket을 쓴다면 return을 써줘야 함.

ImageComponent에서 => 다음에 소괄호 써주는 것에 주의해야 한다.

Next/Image를 사용할 때의 이점은 아래 링크에 자세히 나와있다.

https://fe-developers.kakaoent.com/2022/220714-next-image/

 

Next/Image를 활용한 이미지 최적화 | 카카오엔터테인먼트 FE 기술블로그

조지영(esme) 무언갈 빠르게 좋아합니다. 그래서 변화가 빠른 FE 개발이 적성에 잘 맞습니다.

fe-developers.kakaoent.com

 

7. Adding Head to first-post.js

 

// pages/posts/first-post.js
import Link from "next/link";
import Image from "next/image";
import Head from "next/head";

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <ImageComponent />
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

const ImageComponent = () => (
  <Image src="/images/profile.jpg" height={144} width={144} alt="Your Name" />
); //여기서 소괄호인 것 주의. Not curly Bracket
// curly bracket을 쓴다면 return을 써줘야 함.

 The browser tab should now say “First Post”. 

저작자표시

'Front-End' 카테고리의 다른 글

[Front-End] Carousel  (0) 2023.09.19
[axios] 서버로 데이터 전송  (1) 2023.09.03
[개발 환경 설정] Next.js + Typescript + Styled-components  (0) 2023.08.12
[Typescript] styled-component에 props 전달 과정에서 오류 해결  (0) 2023.06.12
[React] 230417 학습일기  (1) 2023.04.18

'Front-End' Related Articles

티스토리툴바