next.js3 백엔드의 전유물인 API를 Next.js로 다룰 수 있다고?! 넥스트로 리퀘스트를 어떻게 조작할까?🔖 경로에 해당하는 리퀘스트를 처리하려면, 페이지 라우팅과 비슷한 방식으로 api/경로.js와 같은 파일을 만들고 default export한다.import type { NextApiRequest, NextApiResponse } from "next";type ResponseData = { message: string;};export default function handler(req: NextApiRequest, res: NextApiResponse) { res.status(200).json({ message: "Hello from Next.js!" });}리퀘스트 객체는 어떤게 있어?🔖 리퀘스트 객체 종류프로퍼티타입설명method문자열리퀘스트로 들어온 HTT.. 2024. 6. 3. 공짜 렌더링 by Next.js Next.js의 프리(공짜아님)렌더링🔖 브라우저가 페이지를 로딩하기 전에 미리 렌더링 하는것을 의미서버 사이드 렌더링(SSR)정적 생성(SG): default정적 생성🔖 브로젝트 빌드 시점에 미리 HTML을 렌더링getStaticProps()Props 객체를 지정 후 페이지 컴포넌트에서 사용// getStaticProps()export async function getStaticProps() { const res = await axios("/products/"); const products = res.data; return { props: { products, }, };}// Page Componentexport default function Home({ products }.. 2024. 5. 31. Next.js 기본 Next.js는 무엇인가🏷️ 초기 로딩이 느리고 검색 엔진에 제공하는 정보가 적은 리액트의 단점을 커버한 프레임워크pre-rendering을 통해 미리 렌더링할 정보를 저장하거나 서버가 그때 그때 렌더링하여 화면을 출력한다.Vercel를 통한 서버 호스팅을 이용해 빠른 코드 배포가 가능하다.파일 시스템 기반 라우팅을 통해 편하게 페이지를 나누고 개발이 가능하다.어떻게 만들어야 할까?🏷️ 생성 과정npx create-next-app을 이용해 프로젝트를 생성한다.파일 정리 및 기초 세팅 후 npm run dev을 통해 개발자 모드를 열어 개발한다.🔖 프로젝트 초기 구성project |- components |- lib |- pages |- public |- styles eslintr.. 2024. 5. 27. 이전 1 다음
