Next.js13 프로젝트 시작부분 정리

프로젝트 시작

npx create-next-app@latest

1. cmd에서 위와 같은 명령어를 입력하여 설치

2. 프로젝트 이름 입력

3. 필요한 사용 언어 체크

ESLint: 자바스크립트 코드에서 발견되는 문제 패턴들 식별하기 위한 정적 코드 분석 도구.
`src/` directory : 소스 디렉토리 사용유무
import alias: 어떤 경로에 별명(Alias)를 붙이고 모듈을 불러올때 이 Alias를 사용하는 것. (@ 와 ~ 중 사용할 별명 선택)
   사용예시: `../../app/layout` => `@/app/layout`

파일분류

1. public: 사이트 이미지, 파비콘 등 누구나 접근 가능한 폴더

2. src: 안에 app을 둠. (혹시 다른 종류의 주요 파일이 들어갈 가능성이 존재하기 때문에, 주소와 관련이 없을 경우에는 app 파일 바깥에 지정한다.)

3. next.config.js : next.js 에 대한 설정 파일

4. tsconfig.json: typescript에 대한 설정 파일

layout

레이아웃은 페이지를 넘나들어도 바뀌지 않는 부분이다.

RootLayout : 최상위 레이아웃. 이 안에 children 이 있다면 page layout폴더가  children 안으로 들어간다.

만약 로그인전후의 레이아웃이 다르거나 페이지를 넘나들때 다른 레이아웃을 쓰고 싶다면 폴더 안에 layout.tsx파일을 만들어서 사용

//layout.tsx

import { ReactNode } from "react";
import styles from '@/app/page.module.css';

type Props = {children: ReactNode, modal: ReactNode};

export default function Layout({children, modal}:Props){
  return(
    <div className={styles.container}>
      {children}
      {modal}
    </div>
  )
}

route

(폴더명) : 주소창에 관여하지않지만 그룹을 만들 수 있는 폴더

예를 들어 폴더주소는 app/(pass)/home 이어도 주소창에는 /home 으로 나온다.

[폴더명] : 주소창에 관여하는 폴더. 하지만 폴더명이 유동적인 경우 사용.

예를 들어 [username]이나 [id] 는 username이나 id가 바뀐 폴더들이 생성되는 것.

template.tsx, Link, Image, redirect, css

layout.tsx 가 리렌더링 될때 바뀌지않았으면 하는 사용한다면,

template.tsx 는 리렌더링될때 모두 바뀌었으면 할 때 사용. 잘 사용하지는 않으나 구글 애널리틱스 같은 곳에서 사용한다고 함.

 

Link : a태그가 아니라 Link를 사용한다.

import Link from 'next/link';
<Link />

 

Image 파일을 사용할 때는 img태그가 아닌 Image태그를 import해서 사용하면 알아서 최적화해준다.

import Image from 'next/image';
import bLogo from '../../public/bLogo.png';
<Image src={bLogo} alt="logo" />

 

redirect 

redirect를 import하면 쉽게 리다이렉트 시켜준다.

import { redirect } from "next/navigation";

export default function Login() {
  redirect('/i/flow/login');
}

 

dvw, dvh 단위로 레이아웃 틀어짐을 방지 할 수 있다.

Parallel Routes

두가지 화면을 한페이지에 동시에 띄워줄 수 있는 기능으로 같은 선상의 폴더 내에 있는 레이아웃에서 쓸 수 있다.

만약 모달창을 띄우고 싶다면 @modal폴더를 동시에 띄우고 싶은 레이아웃과 같은 폴더에 넣어주어 사용.

client component

기존의 컴포넌트는 서버컴포넌트로 next.js 서버 내에서 돌아가기 때문에 비동기로 서버를 만들 수 도 있다.

But, hook을 사용하지 못하는 문제가 발생한다. 하지만, 서버 컴포넌트는 데이터를 다룰 때 장점이 있어서 사용해야하기 때문에 만약 클라이언트 컴포넌트로 변경하고 싶다면 가장 위에 "use client" 를 추가하면 변경된다(매우 간단!!)

 

주의!!

1. 서버컴포넌트는 클라이언트컴포넌트를 import 할 수 있다. (반대는 안됨!!!!!만약 클라이언트 컴포넌트가 서버 컴포넌트를 import 하게 되면 서버컴포넌트가 클라이언트 컴포넌트로 변경되는 문제가 발생하기 때문)

2. 클라이언트컴포넌트도 서버에서 렌더링되기 때문에 SSR도 된다.

defualt.tsx

parallel routes의 기본값. 그냥 return null을 해주면 된다.

export default function Default() {
  return null;
}

 

예를 들어 modal의 주소를 /login으로 띄우고싶어서 @modal/login 을 만들고 이 안에 page.tsx와 login.modal.css 를 모두 넣어버리면 @modal의 page.tsx가 없어서 메인페이지가 없는 페이지로 인식해버린다.

이럴때, defualt.tsx를 @modal 안에 넣어서 해결  

이때 레이아웃에서 props로 layout과 modal을 내려주고 있을 때, 주소창 비교를 해보면

주소가 localhost:3001일때는 children => page.tsx modal => @modal/default.tsx가 되는거고,
주소가 localhost:3001/login 일때는 children => login/page.tsx, modal=> @modal/login/page.tsx가 된다.

intercepting route

주소가 다른데 같이 뜨게 만들어주는 것을 말한다.

사용법
(..) 나 (.)을 폴더명 앞에 붙여준다. ( 브라우저 주소 기준 (..)는 부모컴포넌트 (.)는 현재컴포넌트를 의미 )

예를 들어서 app/(before)/@modal/(..)i 는 @modal이 주소에 해당하지않기때문에 무시하고 app폴더로 가버린다.

app/(before)/@modal 안에 (.)i 컴포넌트와 i컴포넌트가 있다면 (.)i 컴포넌트가 i컴포넌트를 대체하여 보여진다.

그런데 i 폴더가 왜 필요하냐구요??
브라우저에서 첫 실행할 땐 메인인 i로 실행되기 때문에 필요하다!!(++직접 접근하거나, 새로고침하거나, 주소로 접근할 때도)

!!만약에 parallel route와 intercepting route가 있다면 메인의 page가 아닌 intercepting route page가 처리하게 된다.(클라이언트에서 라우팅 할 때만 인터셉트 라우팅이 적용된다.)

private folder(_폴더명)

폴더명 앞에 언더바(_)를 붙이면 프라이빗 폴더가 되고 주소창에 뜨지 않는다.

주소창에 뜨지않는 폴더
(폴더명) : 그룹폴더. 레이아웃을 만드는 폴더
@폴더명 : 패러럴라우트. 한화면에 두개의 화면을 동시에 보여줌.
_폴더명: 프라이빗폴더. 중복파일정리용

client 에서 redirect 하기 (useRouter)

1. 서버 쪽 리다이렉트가 되어서 클라이언트에서 링크를 통해서 리다이렉트해서 인터셉팅 시킬때.

- “use client”로 클라이언트 컴포넌트로 전환
- 클라이언트 컴포넌트에서는 리다이렉트 사용이 안되기 때문에 useRouter 훅으로 사용
- router.replace(’i/flow/login’)로 변경

2. replace와 push차이

localhost:3000  →  localhost:3000/login  →  localhost:3000/i/flow/login 에서 뒤로가기할 때 

push : 그 전 페이지인 /login으로 가지만 다시 자동으로 /i/flow/login으로 넘어가면서 무한 반복이 됨
replace : 바로 맨 처음 페이지로 로딩되므로 무한로딩이 되지 않음(/login 히스토리가 없어짐)

이때, replace를 하게 되면 배경은 login 이고 modal은 i/flow/login 이기 때문에 `return null`이 아니라 메인페이지의 return 안쪽에 있는 배경과 동일하게 한다.