Next.js 프로젝트 수동 및 자동 생성 방법 및 라우팅 기초

• Next.js 프로젝트 생성하기..
  • 수동 생성
    1. mkdir next-manual
    2. cd next-manual
    3. npm init -y ⇒ pakage.json이 만들어진다.
    4. pakage.json을 수정한다
       
       1. 접은글 내부에 적 
          { "name": "next-manual", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev" }, "keywords": [], "author": "", "license": "MIT" }
    5. npm install react@latest react-dom@latest next@latest
       • page.tsx : view component가 있는 파일 → return 값이 있는 것이다.
    6. app 폴더를 만든다
    7. page.txs 파일을 만든다

 

자동 생성 : npx create-next-app@latest next-sample0 —typescript

좌우 설정이 다른데 ㅎㅎ 폴더 구조가 다르다. App Router가 다르기 때문!!

 

 

• 구동 : npm run dev
  • .next 파일이 생겼다~ ⇒ backend 서버 기능을 하는 것들이 만들어진다.
  • localhost:3000 으로 된다.
• NextJS라우팅
  • 파일의 이름과 폴더명이 중요함 이유는 프레임워크이기 때문에 이름을 통해서 스크립트 처리함
  • NextJS는 시스템 구조를 사용하여 라우팅처리.. 디렉터리를 이용
    1. 디렉터리 생성 : info
       • 파일명이 uri 주소가 된다.
    2. 파일 생성 : page.tsx
    3. 경로를 사용하는 페이지 만들기
    4. https://github.com/CheHyeonYeong/JavascriptStudy/commit/d0ef2c442b00210f2f3a1714916b093d011ee664 관련 내용 깃허브에 넣음

• 만일 404 에러 페이지를 직접 만들고 싶으면 app 디렉토리에 not-found.tsx를 만들어서 꾸미면 됩니다.
  • 작성할 때 컴포넌트 명은 신경 쓰지 않아도 됨
• link 사용…
  • navigation
    1. 디렉터리 생성(components) ⇒ 경로 폴더가 아니다. page.tsx 가 있다면 경로로 쓸 수 있다
    2. 파일 명 : navigation.tsx (아무거나 해도 됨)
  • Link를 사용하면... anchor가 아닌 javascript를 이용하여 페이지를 변경처리... 그래서 웹 페이지의 리로드가 일어나지 않게 됩니다. 자연스럽게 빠르게 이동 가능
• “use clent” 마킹 처리
  • 해당 위치의 컴포넌트는 Client Side Rendering처리
  • 클라이언트 측에서 React를 이용한 컴포넌트 처리가 일어남 CSR 처리 이외에 마킹 처리가 없는 경우에는 SSR로 서버측에서 Rendering이 일어남
  • 두 Rendering 사이의 차이점
    1. 페이지 로딩에서의 차이
    2. CEO(검색엔진 최적화)에서의 차이
  • hydration ⇒ 단순한 서버 사이드의 HTML 전달에서 React를 언제 동작할 수 있게 할지를 결정하는 과정을 의미함 ser client를 통해서 페이지를 좀 더 interactive하게 동작할 수 있게 Eact 컴폰전트를 HTML 에 적용시킬 수 있게 하는 것
    • 이런 일련의 동작의 장점은 불필요한 렌더링을 통한 지연을 최소화하고 화면이 보이지 않는 상황을 줄여줌
• Layouts
  • 레이아웃은 반복적인 컴포넌트를 줄여서 표현하는 것이 가능하다
  • 레이아웃은 디렉터리 별로 구분해서 사용이 가능하다 이때 사용은 중첩의 개념