Next.js udemy 시작.

버전이 페이지 라우터 / 앱 라우터 두 종류가 있는데 

기존에 구매했던 버전이 페이지 라우터 기반으로 이뤄져있는데

문제는 사양되어가는 버전이라는 것.

대세는 앱 라우터라고 한다.

페이지 라우터 버전 듣다가 머리속에서 휘발 시키고 

앱 라우터 버전으로 구매하고 시작.   

 

======================
Next.js 설치

npx create-next-app@latest
=====================
npm install

npm run dev 
== yarn start
========================
내장 페이지 사전 렌더링 기능이 바로 표준 React 앱에는 없는
NextJS가 제공하는  핵심 기능 중 하나

NextJS
 1. 풀 스택 애플리케이션
프런트 엔드와 백 엔드를 혼합해 더 복잡한
앱을 만들 수 있음
2. route
시스템 도움으로 경로를 설정할 수 있다는 겁니다
 NextJS에 내장돼 있죠
3. 마지막으로
무시할 수 없는 중요한 기능은 NextJS가
서버에 있는 모든 페이지와 구성 요소를
화면에서 렌더링한다는
겁니다

app router
놀랍도록 현대적인 새 기능을 열어주는 거죠,

 React나 Server 구성 요소, Server Actions 같은 거요

90.Wokring with Pages & Layouts
레이아웃 js와 페이지 js는 함께 일합니다
레이아웃은 래퍼 페이지는 실제 콘텐츠죠

91.
아이콘이라는
이미지를 앱 폴더에 직접 추가하면 지금
하는 것처럼요 이건 파비콘으로
사용됩니다
jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

import Header from "@/components/header";
이제 @으로  임포트 경로를 단순화

99. CSS modules 사용 방법 나옴.

<img src = { a.src} />를 쓰는 것 보다

import Image from `next/image`;해서

<Image  src = { a } />를 쓰는 게 좋음 

최적화 지원을 해준다고함.

자세한 사항은 Nextjs Docs <image>파트 참조 하면됨.

 

css 쓸려면 

home이라는 파일이 있으면

home.module.css라고 중간에 module을 붙여야만 css를 쓸 수 있음.