Front-End Study/Next.js4 앱 라우터가 지향하는 파일 아키텍쳐 곧 시작하는 최종 프로젝트에 앱 라우터를 사용할 것 같아서 파일 아키텍쳐에 대해 미리 조사해보았다!✨ 어떻게 하면 효율적인 파일 구조를 만들어 앱 라우터를 제대로 사용할 수 있을까?기본적으로 페이지 라우터와 앱 라우터의 차이는 유연함pages-only : 모든 JS파일을 라우트로 변환해야 하는 구조로 기존 페이지 라우터의 pages 폴더 안의 모든 JS 파일들은 페이지가 되던 것을 의미하지만 앱 라우터는 관련 파일을 한곳에 보관하는 app 폴더를 사용이를 colocation 이라고 하며 더욱 효율적인 개발이 가능보통의 프로젝트 파일 구조는 역할을 기반으로 한다.페이지, 컴포넌트, 유틸, 훅, API 폴더 등앱 라우터의 경우 기능을 기반으로 폴더구조를 이루며, 이는 앱 라우터의 장점을 더욱 부각시킨다.인증.. 2024. 7. 22. 백엔드의 전유물인 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 다음
