[ ReactJs ] Nextjs 랜딩 페이지 템플렛화시키기 + SEO 최적화
01.Nextjs 프로젝트 실행
npx create-next-app@latest
프로젝트생성 폴더로 이동하여 아래명령어를 실행하면 localhost:3000에서 프로젝트를 확인할 수 있다.
npm run dev
** app router 주의점 **
app router 를 사용하겠냐는 메세지가 나와서 사용하겠다고 했지만, 여러가지 문제가 있어서 아래와같이 사용하지 않게되었다.
app directory 사용시
- 페이지와 레이아웃의 통합 : 페이지와 레이아웃을 같은 디렉토리내에 정의가능하다. 레이아웃을 각페이지에 쉽게 적용가능하며, 코드의 중복을 줄여준다
- 서버 컴포넌트 사용지원 : 클라이언트 사이드의 불필요한 스크립트를 줄요준다.
- 향상된 라우팅 : app 디렉토리 내에서 파일및 폴더 구조를 통한 라우팅이 가능함
- 모듈화및 스케일링 : 컴포넌트, 훅, 유틸등 모듈화로 관리가능하다.
app directory 사용하지 않은이유는…
- 기존의 페이지 기반라우팅 : pages 디렉토리를 사용하여 각 페이지를 파일로 정의하고 자동으로 라우팅 설정, 직관적이고 단순함
- 레이아웃 분리 : 레이아웃을 별도의 컴포넌트로 관리하여 임포트하여 사용한다.
- getServerSideProps or getStaticProps 사용 : 모든 컴포넌트는 클라이언트 사이드에서 랜더링 할수있다. 서버사이드 랜더링에 용이하다.
getServerSideProps :
- 페이지 렌더링 시 서버 측에서 데이터를 미리 불러와서 페이지에 props로 전달하는 방법
- SSR을 구현하며, SEO최적화와 초기 페이지 로드시 불필요한 데이터를 포함시킬수있다.
** 결론 **
SEO가 중요한 페이지에 getServerSideProps를 사용하면 검색 엔진 최적화에 매우 유리하며, 사용자에게 항상 최신의 데이터를 제공
• 성능 문제: getServerSideProps는 모든 페이지 요청에 대해 서버에서 실행되기 때문에, 고효율 서버 처리가 필요하며, 서버 응답 시간이 사용자 경험에 직접적인 영향을 미칠 수 있습니다.
• 캐싱 전략: getServerSideProps를 사용하는 경우, 캐싱 전략을 잘 계획하여 서버 부하를 최소화하고 응답 시간을 개선하는 것이 중요합니다. 일반적으로 CDN을 통한 캐싱이 이 방법에는 적합하지 않기 때문에, 서버 레벨에서의 캐싱을 고려할 수 있습니다.
02. 새롭게 Nextjs 프로젝트실행 without app router
03.생성된 프로젝트의 디렉토리구조 [ nextjs version : 14.2.3 ]
├── package.json
├── public
│ ├── favicon.ico
│ ├── next.svg
│ └── vercel.svg
└── src
├── pages
│ ├── _app.js
│ ├── _document.js
│ ├── api
│ │ └── hello.js
│ └── index.js
└── styles
├── Home.module.css
└── globals.css
_app.js
• 역할: 이 파일은 모든 페이지에 공통적으로 적용되는 상위 컴포넌트입니다. 애플리케이션의 레이아웃을 정의하거나, 페이지 간에 유지되어야 할 상태를 관리하거나, 전역 CSS를 적용하는 등의 용도로 사용됩니다.
• 사용 예: 공통 레이아웃, 페이지 전환 시 상태 유지, 글로벌 CSS 적용, 외부 라이브러리 설정 등.
_document.js
• 역할: 서버 사이드에서만 렌더링되며, 초기 서버 응답 시 HTML 문서의 구조를 정의합니다. <html>, <body> 태그와 같은 문서 레벨의 요소를 커스터마이즈할 수 있습니다.
• 사용 예: HTML 문서의 언어 설정, <meta> 태그 추가, 외부 리소스(<link> 또는 <script>) 삽입 등.
api/hello.js
• 역할: API 라우트를 정의합니다. 이 파일은 서버 사이드에서 실행되며, /api/hello 경로로 HTTP 요청을 받을 수 있습니다. Next.js는 이 경로를 통해 API 요청을 처리하고, JSON 형식 등의 응답을 반환할 수 있습니다.
• 사용 예: RESTful API 엔드포인트 구성, 서버 사이드 데이터 처리, 데이터베이스 쿼리 등.
index.js
• 역할: 애플리케이션의 홈 페이지를 정의합니다. 이 파일은 / 루트 경로로 접근할 때 렌더링됩니다.
• 사용 예: 웹사이트의 메인 페이지, 다른 페이지로의 링크나 네비게이션 제공 등.
public 디렉토리
• 역할: 정적 파일(이미지, 아이콘, 문서 등)을 저장합니다. 이 디렉토리에 있는 파일은 브라우저에서 직접 접근할 수 있으며, 빌드 프로세스 없이 서버의 루트 URL 아래에서 제공됩니다.
• 파일 예시:
• favicon.ico: 웹사이트의 파비콘.
• next.svg: SVG 포맷의 이미지, 예를 들어 로고나 아이콘으로 사용 가능.
• vercel.svg: 또 다른 SVG 이미지, 주로 Vercel 로고로 사용.