NextJS

📌 NextJS

React

+Express.js

+React-Route_Dom

+Server Side Rendering

의 느낌

설치

npx create-next-app@latest .

실행 명령어

개발 : npm run dev

배포 : npm run build

서비스 시작 : npm run start

Route

사용자가 접속하는 경로와 우리가 설정하는 경로의 주소차이

http://a.com/ => /pages/index.tsx

http://a.com.sub/ => /pages/sub/index.tsx

http://a.com/sub/about => /pages/sub/about.tsx

http://a.com/sub/1 => /pages/sub/[id].tsx

http://a.com/sub/2 => /pages/sub/[id].tsx

[id] 파라미터를 받는법

useRouter를 이용하여 파라미터를 받고 화면에 표시해준다

API Route

next의 특징중 하나는 SSR과 CSR을 모두 가지고 있는 올인원 솔루션

http://a.com/api => /pages/api/index.tsx

서버에 a.com/api로 데이터 요청 후 pages/api/index.tsx의 데이터를 서버쪽에서 공급하도록 할수있음

/api 아래에 [id].ts로 예제 생성

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ id: req.query.id });
}

/api/1 로 이동시

{“id”:”1”}

이 페이지에 나온다

env 환경변수

보통의 경우

.env 파일 안에

API_URL=http://localhost:3000/

이런식으로 쓰지만

next의 경우

API_URL 앞에 NEXT_PUBLIC을 붙어야 한다.

NEXT_PUBLIC_API_URL

이렇게하면 빌드시 배포파일에 포함된다.

.env 파일

NEXT_PUBLIC_API_URL=http://localhost:3000/

/pages/index.tsx 안에 추가

<li>
  <Link href="/sub/fetch">/pages/sub/fetch.js</Link>
</li>

/sub/fetch.ts

import Link from "next/link";
import React, { useEffect } from "react";

const Fetch = () => {
  useEffect(() => {
    fetch(process.env.NEXT_PUBLIC_API_URL + "api/1")
      .then((res) => res.json())
      .then((data) => console.log(data));
  });
  return (
    <>
      <h1>/page/sub/fetch.js</h1>
      <Link href="/">/pages/index.js</Link>
    </>
  );
};

export default Fetch;