Advanced React 탐색: Next.js의 힘 활용하기-JS 튜토리얼-php.cn

Advanced React 탐색: Next.js의 힘 활용하기

PHPz

풀어 주다： 2024-08-16 12:31:40

원래의

902명이 탐색했습니다.

끊임없이 진화하는 웹 개발 세계에서는 앞서가는 것이 중요합니다. 현대적인 웹 애플리케이션을 구축하는 방법을 혁신하는 강력한 React 프레임워크인 Next.js를 만나보세요. Next.js를 특별하게 만드는 요소와 이것이 개발 프로세스를 어떻게 강화할 수 있는지 실제 사례와 함께 자세히 살펴보겠습니다.

Next.js란 무엇인가요?

Next.js는 Vercel에서 개발한 React 프레임워크로, 서버 측 렌더링과 정적 사이트 생성을 쉽게 만들기 위해 설계되었습니다. 성능과 SEO 개선을 목표로 하는 강력한 기능으로 React를 강화합니다.

Next.js를 선택하는 이유는 무엇입니까?

Exploring Advanced React: Unlocking the Power of Next.js

Next.js는 다음과 같은 몇 가지 뛰어난 기능을 제공합니다.

서버측 렌더링(SSR)
정적 사이트 생성(SSG)
API 경로

예제를 통해 이러한 기능을 자세히 살펴보겠습니다.

Next.js의 핵심 기능

1. 파일 기반 라우팅

Next.js는 직관적인 파일 기반 라우팅 시스템을 사용합니다. 페이지는 페이지 디렉토리에 생성되며 파일 이름은 경로에 직접 매핑됩니다.

예:

// pages/about.js
export default function About() {
  return <h1>About Us</h1>
}

로그인 후 복사

이 파일은 /about에 자동으로 경로를 생성합니다.

2. 서버 측 렌더링(SSR)

SSR은 getServerSideProps 함수를 사용하여 구현됩니다.

예:

// pages/ssr-example.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return { props: { data } }
}

export default function SSRPage({ data }) {
  return <div>Server-side rendered data: {data.title}</div>
}

로그인 후 복사

이 페이지는 각 요청에 대한 데이터를 가져와서 최신 콘텐츠를 보장합니다.

3. 정적 사이트 생성(SSG)

정적 콘텐츠의 경우 getStaticProps를 사용하세요.

예:

// pages/ssg-example.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data')
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60 // Regenerate page every 60 seconds
  }
}

export default function SSGPage({ data }) {
  return <div>Static data: {data.content}</div>
}

로그인 후 복사

이 페이지는 빌드 시 생성되며 지정된 간격으로 다시 생성되도록 설정할 수 있습니다.

4. API 경로

Next.js 앱 내에서 API 엔드포인트를 생성하세요.

예:

// pages/api/user.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe', age: 30 })
}

로그인 후 복사

이렇게 하면 /api/user에 사용자 데이터를 반환하는 API 엔드포인트가 생성됩니다.

Vercel을 사용한 배포

Vercel을 사용한 배포는 간단합니다.

GitHub 저장소를 Vercel에 연결하세요.
프로젝트 설정을 구성하세요.
한 번의 클릭으로 배포하세요.

Vercel은 CI/CD를 자동으로 설정하므로 저장소에 푸시하는 것만큼 간단하게 업데이트할 수 있습니다.

Next.js 개발 모범 사례

1.가능한 경우 정적 생성 사용

사전 렌더링이 가능한 페이지의 경우 항상 SSG를 선택하세요.

   export async function getStaticProps() {
     // Fetch data from an API
     const res = await fetch('https://api.example.com/posts')
     const posts = await res.json()

     return {
       props: {
         posts,
       },
     }
   }

로그인 후 복사

2.이미지 최적화

자동 이미지 최적화를 위해 다음/이미지 구성요소 사용:

   import Image from 'next/image'

   function HomePage() {
     return (
       <Image
         src="/profile.jpg"
         alt="Profile Picture"
         width={500}
         height={500}
       />
     )
   }

로그인 후 복사

3.CSS를 효율적으로 관리

구성요소 범위 스타일에 CSS 모듈 활용:

   // styles/Home.module.css
   .container {
     padding: 0 2rem;
   }

   // pages/index.js
   import styles from '../styles/Home.module.css'

   export default function Home() {
     return <div className={styles.container}>Welcome to Next.js!</div>
   }

로그인 후 복사