꾸준히 성장하는 개발자

[Next.js] Next.js 시작하기 본문

Next.js

[Next.js] Next.js 시작하기

ahleum 2022. 5. 31. 20:25

시작하기 전 Next.js는 무엇인가??

 

 

Next.js는 React 기반의 프레임워크로, React 애플리케이션을 구축하기 위한 기능과 기본 구조를 제공합니다.

다음은 Next.js의 주요 특징입니다:

  1. 서버 사이드 렌더링 (Server-Side Rendering, SSR): Next.js는 페이지를 서버 측에서 렌더링하여 초기 로드 속도와 검색 엔진 최적화(SEO)를 개선할 수 있습니다. SSR은 사용자에게 초기 콘텐츠를 빠르게 표시하여 사용자 경험을 향상시킵니다.
  2. 정적 사이트 생성 (Static Site Generation, SSG): Next.js는 빌드 시점에 사전 렌더링하여 정적 파일로 생성할 수 있습니다. 이를 통해 동적 데이터를 사전 렌더링하여 정적인 HTML 파일을 생성하고 CDN에 배포할 수 있으며, 이는 성능과 보안에 이점을 제공합니다.
  3. 자동 코드 분할 (Automatic Code Splitting): Next.js는 페이지별로 자동으로 코드를 분할하여 필요한 코드만 로드되도록 합니다. 이를 통해 초기 로딩 속도를 향상시키고 필요하지 않은 코드의 로드를 줄일 수 있습니다.
  4. Hot Module Replacement (HMR): Next.js는 개발 중에 코드 변경 사항을 실시간으로 반영하여 빠른 개발 환경을 제공합니다. 변경된 모듈만 업데이트되어 페이지 새로고침 없이 개발 과정을 간편하게 유지할 수 있습니다.
  5. 간편한 라우팅: Next.js는 내장된 라우팅 시스템을 제공하여 페이지 간의 이동과 동적 경로 매개변수 처리를 쉽게 할 수 있습니다.
  6. API 라우팅: Next.js는 API 엔드포인트를 쉽게 작성하고 라우팅할 수 있는 기능을 제공합니다. 이를 통해 서버리스 함수나 백엔드 API를 구축할 수 있습니다.
  7. 다양한 환경 지원: Next.js는 TypeScript, CSS-in-JS 라이브러리 (예: styled-components, Emotion)와 함께 사용할 수 있으며, 다양한 데이터 백엔드와의 통합을 지원합니다.

 

 

 

시작하기

npx create-next-app@latest

 

 

만약 typescript도 함께 진행하고 싶다면 뒤에 --typescript를 함께 작성해주면 된다.

npx create-next-app@latest --typescript

 

 

 

설치를 기다리면 프로젝트 이름은 무엇으로 할지 물어볼 것이다

그때 이름을 작성해주면 된다

 

pages라는 폴더가 있는데 이 페이지 안에 제작을 해서 렌더링 해준다

 

 

export default function Home() {
  return "hi";
}

 

안에 작성할 때는 위처럼 작성하는데

이때 주의할점이 fuction의 이름으로 페이지를 렌더링 하지 않고 파일의 이름으로 렌더링이 된다는 점이다

 

페이지 이동이 될때 저 pages의 폴더 안에 있는 파일들의 이름을 보면된다

index는 ' / '

About는 '/About ' 이렇게 작성해주면 된다.

파일의 이름을 적는다는것 잊지말자!!!

 

'Next.js' 카테고리의 다른 글

[Next.js] Pre-rendering / getServerSideProps  (0) 2022.08.17
[Next.js] api키 숨기기 / redirect / rewrite  (0) 2022.08.16
[Next.js] _app.js / 커스텀 App component  (0) 2022.08.04
[Next.js] Louting  (1) 2022.05.31