Next.js 14 프로젝트 생성하기

Next.js 14 프로젝트 생성
Node.js 18버전 이상필요
npm 버전 10.8.3 이상 필요

13버전부터는 Page Router에서 App Router로 라우팅 방식이 변경되었다.

#npm 업데이트 코드
npm install -g npm@10.8.3

프로젝트 설치하고 싶은 폴더 경로에서 터미널 또는 VSC 열기

#Next.js 최신버전으로 프로젝트 생성하는 명령어
npx create-next-app@latest

프로젝트명과 설정을 선택한다.
코드작성시 정렬 통일된 스타일을 유지시켜주는 ESlint를 적용 할 수도 있고
타입스크립트를 적용 할 수도 있고, CSS 코드 작성에 도움을 주는 Tailwind CSS도 프로젝트 시작과 동시에 설치 할 수 있다.
Tailwind CSS는 써보지는 않았지만 Styled-components를 대체 할 수 있는 라이브러리라고 한다.

프로젝트 실행시키는 법

#생성한 프로젝트 경로로 들어가기
cd [프로젝트명]
#next 실행
npm run dev

리액트와 마찬가지로 기본 주소는 localhost 3000포트에서 실행되며, 기본 레이아웃을 확인할 수 있다.

프로젝트 폴더 구성을 간략하게 살펴보면
globals.css는 모든 파일에 적용 할 전역으로 CSS를 적용하는 파일이다.
layout.js는 page.js를 내부에 포함하는 페이지로 React의 index.js로 봐도 될 것 같다.
Header 정보나 전역에서 사용하는 컴포넌트를 적용 할 때 쓴다고 한다.
page.js는 페이지에 실질적으로 작동 코드를 적는 부분이다. React에서 app.js를 생각하면 될 것같다.
page.module.css 는 page.js에서만 독립적으로 적용되는 CSS를 적는 파일이다.
그냥 module.css가 아닌 css파일로 작성하게 되면 다른 파일에서 원치않는 CSS가 적용 될 수도 있다.

페이지 구성 Routing 방법

리액트로 페이지이동을 구현 할때는 아래처럼 react-router-dom 패키지를 설치하고
app.js에서 Router 태그 안의 Routes 태그 안의 Route태그에 경로와 컴포넌트를 명시하는 방식으로 페이지 이동을 구현하였다.

#App.js

import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
function App() {
  return (
  	<>
    	<Router>
        	<Routes>
            	<Route path="/address" element={<ComponentName />} />
            </Routes>
        </Router>
  	</>
  )

Next.js에서는 위와 같은 단계를 거치지 않고 app 폴더 경로 아래에 주소 Name Space로 쓰일 폴더를 생성하고 그 아래 page.js에 코드를 작성하여 페이지 이동을 구현 할 수 있다.

/welcome 이라는 경로를 만들어서 localhost:3000/welcome을 접속해보겠다.

#welcome.js
export default function Home() {
  return(
    <>
    	<h1>Welcome Next.js page!</h1>
    </>
  )
}

리액트처럼 따로 Router 경로를 설정해주지 않더라도 router가 되는 것을 확인할 수 있다.

그리고 Next에서는 컴포넌트의 종류가 두가지다
Server Component Client Component
기본적으로 컴포넌트 파일을 작성하면 Server Component 컴포넌트이고 코드 최상단에
'use client'라고 적으면 그게 Client Component로 변경하는 방법이자 선언이다.

리액트에서 사용하는 useState와 같은 상태관리 문법은 Client Component에서만 사용 가능하다.
그럼 기능이 절단나버리는 Server Component는 언제 사용 할까?
사용자의 동작에 대한 반응이 필요없는 페이지에 적합하다 Server Component는 웹 페이지를 서버쪽에서 다 로직처리를 모두 한 후 html파일만 화면에 보여준다.
자바스크립트 실행에 필요한 자원을 보내지 않아도 되기 때문에 로딩속도가 빠르다.
그리고 검색엔진 노출에 더 적합하다.
이용자와 상호작용이 필요한 경우에는 Client Component를 쓰고 빠른 데이터 조회, 사이트 노출이 필요 할때는 Server Component를 사용하면 될 것 같다.

Server Component 일부분에만 Client Component를 사용 할 수도 있다는데 더 공부를 해봐야겠다.

참고자료
코딩애플
https://www.youtube.com/watch?v=PCkiz2GUFg8&t=211s