반응형

📝분석 (모니터링)

/** _components/web-vitals.tsx **/
'use client'
import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
    useReportWebVitals((metric) => {
        console.log(metric)
    })
}

/** /app/layout.tsx **/
import { WebVitals } from './_components/web-vitals'
 
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

Next.js에는 성능 지표 측정 및 보고 기능이 내장되어 있습니다

 

  1. Time to First Byte (TTFB)
    • 웹 페이지 요청 후 서버가 첫 번째 바이트를 브라우저에게 전송하는 데 걸리는 시간입니다 클라이언트가 서버로부터 첫 데이터를 받기까지의 대기 시간을 측정하여 네트워크 및 서버 성능을 평가하는 데 사용됩니다.
  2. First Contentful Paint (FCP)
    • 사용자가 웹 페이지를 열고 첫 번째 콘텐츠가 화면에 나타나기 시작하는 시점입니다. 일반적으로 텍스트나 이미지와 같은 가장 먼저 렌더링되는 콘텐츠를 말합니다.
  3. Largest Contentful Paint (LCP)
    • 웹 페이지에서 가장 큰 콘텐츠 요소가 화면에 나타나는 데 걸리는 시간입니다. 주로 이미지나 텍스트 블록과 같은 큰 콘텐츠를 측정하여 사용자 경험을 평가하는 데 사용됩니다.
  4. First Input Delay (FID)
    • 사용자가 페이지와 상호 작용(클릭, 터치 등)하고 브라우저가 실제로 이벤트에 응답하기까지 걸리는 시간입니다. 주로 사용자와의 상호 작용에 대한 웹 페이지의 반응성을 측정하는 데 사용됩니다.
  5. Cumulative Layout Shift (CLS)
    • 페이지가 로드되는 동안 레이아웃이 얼마나 불안정한지를 측정하는 지표입니다. 주로 이미지나 광고와 같은 동적으로 로드되는 콘텐츠가 페이지의 레이아웃을 어떻게 변경하는지를 평가하여 사용자가 의도치 않게 클릭하거나 다른 동작을 할 때의 불편함을 측정합니다
  6. Interaction to Next Paint (INP)
    • 사용자 상호 작용 후 다음 렌더링이 시작되기까지의 시간을 나타냅니다. 사용자가 웹 페이지와 상호 작용한 후 얼마나 빨리 새로운 콘텐츠나 업데이트가 화면에 나타나는지를 측정하여 사용자 경험을 평가합니다.

 

결과를 모든 엔드포인트로 보내 사이트의 실제 사용자 성과를 측정하고 추적할 수 있습니다

 

 

📝Typescript

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
}
 
module.exports = nextConfig

next/link에서 오타 방지 기능 추가 가능

 

📝ESLint

Next.js는 ESLint 플러그인(@next/eslint-plugin-next)을 제공하는데 기본적으로 이러한 기능들이 적용 되어있다

 

📝환경 변수

/** .env **/
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

TWITTER_USER=nextjs
TWITTER_URL=https://twitter.com/$TWITTER_USER

/** API.tsx **/
export async function GET() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}
  • Next.js에는 .env.local에서 process.env로 환경 변수를 로드하는 기능이 내장되어 있습니다
  • env.local을 통해 로드 된 모든 환경 변수는 Node.js에서만 사용할 수 있는데 브라우저에 변수를 사용하려면 변수 앞에 NEXT_PUBLIC_을 붙여야합니다
  • .env.test 파일에서도 동일한 작업을 수행할 수 있습니다 테스트 목적으로만 특정 환경 변수를 설정해야 하는 jest 또는 cypress와 같은 도구를 사용하여 테스트를 실행할 때 유용합니다

 

📝상대경로 , 절대경로, 경로 별칭

상대경로, 절대경로, 경로 별칭도 사용이 가능하다

 

📝MDX

마크다운을 처리할 수 있는 노드 패키지도 지원한다

반응형

'[Next.js] > [Next 14]' 카테고리의 다른 글

[Next 14] Env 파일 적용 순서  (0) 2024.08.14
[Next 14] Lazy Loading, Next/Dynamic (청크 분리, 코드스플리팅)  (0) 2024.01.02
[Next 14] 정적 데이터, 이미지, 폰트, 스크립트, 정적 메타데이터, Opengraph, 동적 메타데이터  (1) 2024.01.02
[Next 14] 외부 라이브러리, 런타임(Runtime), CSS Style  (0) 2024.01.02
[Next 14] Server Component (SSR), Client Component (CSR)  (1) 2024.01.02

티스토리툴바