공부, BackEnd/Next.js

[Next.js] 1. Next.js 시작하기 및 기초

xobo 2024. 4. 2. 18:25

1. Next.js란?

  : react를 서버에서 렌더링하게 해주는 등의 백엔드 기술이다.

  : 자바스크립트, 타입스크립트 등을 사용할 수 있다.

 

2. 시작하기

  가. vscode에서 프로젝트 폴더를 열고, 터미널을 실행한다.

  나. npx create-next-app 프로젝트명 --use-npm 을 입력한다.

  다. 그렇게 되면 프로젝트 제작에 필요한 패키지들이 다운로드된다.

 

3. 웹 페이지 렌더링 방법들

  : Next.js는 다음의 방법들을 제공한다.

 

  가. 서버 사이드 렌더링(SSR)

    : 서버에서 사용자에게 보여줄 페이지를 만들어주므로, 데이터 노출 위험이 적어 보안적으로 좋다.

    : PHP 등이 이 방법을 사용한다.

 

  나. 클라이언트 사이드 렌더링(CSR)

    : 브라우저가 웹앱에 최초 접속 시 렌더링할 모든 요소들을 한번에 받아놓고, 사용자의 작업에 따라 즉시 필요한 페이지를 렌더링하므로 속도가 빠르다.

    : React 등이 이 방법을 사용한다.

 

  다. 정적 사이트 생성(SSG)

    : 위의 두 방법들을 함께 사용하는 것인데, 구성요소 상 별로 변하지 않는 정보들은 클라이언트에게 바로 줘버리고, 중요한 내용들만 나중에 필요에 따라 제공한다는 것이다.

 

4. 기본 기능 알아보기

  가. 페이지에 경로 매개변수 사용하기

    : 디렉토리 명을 매개변수로 사용한다는 뜻이다.

    : 루트 디렉토리에 pages 만든다. (여기가 첫 페이지(index.js or index.tsx등...)가 저장되는 곳이다.)

    : pages 안에 greet 폴더를 만들고, 거기에 대괄호로 둘러싸진 js문서를 만든다. 예) [name].js

    : 다음과 같이 작성한다.

export async function getServerSideProps({params}) {
    const {name} = params;
    return {props: {name}}
}

// export async function getServerSideProps(...){...}
// 페이지를 렌더링하는 동안 필요한 데이터를 가져오는 비동기 함수
// 이 함수는 반드시 객체를 리턴하고, 이 리턴값을 사용할 때는 props 속성값을 사용해야 한다.

function Greet(props) {
    return (<h1>{props.name}님, 안녕하세요.</h1>);
}

export default Greet;

    : 그리고 터미널에 npx run dev 라고 입력하여 서버를 시작한다.

    : 브라우저 주소 창에 localhost:3000/greet/이름 을 입력하면, 디렉토리에 입력한 이름이 매개변수가 되어 "이름님 안녕하세요"가 출력된다.

 

  나. 컴포넌트에서 경로 매개변수 사용하기

    : useRouter를 사용하면, 컴포넌트 내에서도 경로 정보에 접근할 수 있다.

    : 방금의 [name].js 를 다음과 같이 수정할 수 있다.

import { useRouter } from "next/router";

function Greet() {
    const {query} = useRouter();

    return <h1>{query.name}님, 안녕하세요.</h1>
}

export default Greet;

 

  다. Link 컴포넌트

    : 최신 next.js 에서는 기존의 a태그와 기능이 비슷한 link태그를 지원한다.

    : link태그를 사용하면, 그에 관한 정보들을 next.js가 미리 로드하여 속도 최적화가 가능하다.

      1) 동적 경로 매개변수를 사용하기

import Link from 'next/link';

<Link href="/blog/[date]/[title]" as="blog/20240101/kukuku">글 읽기</Link>
// href에 동적 경로 매개변수를 전달하고
// as에 브라우저 주소창에 표시할 값을 나타낸다

 

      2) href에 객체를 전달할 수도 있다.

import Link from 'next/link';

<Link 
	href={
    	pathname: "/blog/[date]/[title]",
        query: {
        	date: "2024-02-03",
            	title: "안녕하세요"
        }
    }>
	글 읽기
</Link>

 

  라. Next.js의 Image 컴포넌트

    : 표준 img태그 대신 해당 컴포넌트를 사용할 수 있다.

    : 해당 컴포넌트를 사용하면 최적화 된 이미지 기능을 제공한다.

      * Image컴포넌트에서 외부 이미지 링크를 사용 시 next.config.js에 다음과 같이 추가해야 한다.

module.exports = {
	images: {
    	domains: [도메인_입력]
    }
}

 

 

    : Image 컴포넌트 일반형

<Image src="경로" width={...} height={...} alt="대체텍스트" layout="..."/>

 

      1) layout 속성값

        가) fixed: 크기 고정 시 화면에 상관없이 그 크기를 유지.

        나) responsive: 화면 크기에 따라 최적화된다.

        다) intrinstic: 이미지 크기 기준으로, 화면이 그보다 커지면 최적화하지 않고, 화면이 작아지면 최적화한다.

        라) fill: 부모 요소 기준으로 꽉 채운다, 이것을 사용하면 width, height를 사용할 수 없다.

 

  마. 메타데이터

    1) Head 컴포넌트로 title 태그에 접근하기

      : index.js를 다음과 같이 작성한다.

import Head from "next/head";

function Homepage() {
    return (
        <>
            <Head>
                <title>만든페이지</title>
            </Head>
            <div>안녕하세요</div>
        </>
    );
    // Head 컴포넌트는 반드시 어떤 태그 안에 포함되어야 한다
}

export default Homepage;

  : 작성 후 이 페이지에 접속하면 타이틀이 바뀐 것을 알 수 있다.

  : 똑같은 방법으로 기존의 head 태그 내의 meta태그에 접근 가능하다.

  : 메타 태그만 모아놓은 문서만 만들어서, 페이지마다 import로 불러와서 사용 가능하다.