The HamSter Developer

next 빌드npm run build로 next를 빌드한다. React에 warning이 있으면 빌드가 실행되지 않는다.이후 실행된 빌드 파일은 .next라는 숨김 파일에 저장된다.이후 src 파일은 삭제해도 된다. (개발 환경에서는 삭제하면 안된다.)이후 AWS 클라우드 컴퓨터로 넘겨주는 파일은 .nest public package.json만 있으면 알아서 npm i --prodution이 된다.basePath 지정next.config.mjs 수정basePath: "/자기가 원하는 url",만약 /main이라고 했고 내 도메인이 oniri1.com 이라면oniri1.com/main이 router와 Link 등의 root 도메인으로 설정된다.pm2로 어떻게 실행하는가?일단 AWS 환경에 pm2를 설치np..

Next에서는 통신을 위해 SWR이라는 라이브러리가 존재하지만, 해당 프로젝트를 하는 동안에는 이게 있는 줄 몰라 React-query를 사용했다..사용법도 나와있지 않았지만 어떻게든 적용시켜 사용했다..npm install @tanstack/react-query기존 React 작동 방식은 이랬다.root.render( );Next 에서는 가 children이기 때문에, Query 컴퍼넌트를 하나 만들어 사용할 수 있었다."use client";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const queryClient = new QueryClient({ defaultOptions: { ..

React에서는 react-router-dom을 사용했지만, Next.js에서는 이 기능을 기본적으로 제공해준다.Routes : 폴더를 기준으로 라우팅을 해주기 때문에 더이상 필요하지 않다.Linkimport Link from 'next/link'; Go to About PageRouternavigate를 대신해주는 친구다.코드로서 유저의 URL을 관리할 수 있다.import { useRouter } from 'next/navigation';export default function Home() { const router = useRouter(); const handleNavigate = () => { router.push('/about'); // '/about' 페이지로 이동 }; r..

Next에서 제공하는 Image Component는 우리가 기존에 사용하면 HTML의태그를 대신해주는 컴퍼넌트다.우리가 평소에 사용하던를 최적화 해주는 Image 컴포넌트를 지원해준다.옵션은 이 4개중 하나를 넣는다.fixed: width와 height를 사용하여 이미지 크기를 고정합니다.intrinsic: width와 height를 사용합니다. 기본적으로 이미지의 원본 비율을 유지합니다.responsive: fill을 사용하여 부모 컨테이너의 크기에 맞게 이미지를 채웁니다.fill: fill 속성을 사용하여 부모 컨테이너를 채우도록 이미지를 설정합니다.간단 예

이전 포스트에 설명한 것 처럼 Next도 결국은 서버다.그래서 개발자가 해당 Next 서버에서도 받을 수 있는 API를 설정할 수 있는데이를 API Routes라고 한다.0. 폴더 생성src 폴더에 (app로 들어가지 말고) pages 폴더 생성 -> api(여기서부터 커스텀이 가능하다) 폴더 생성 -> api/원하는API.ts 생성1. next config 수정/** @type {import('next').NextConfig} */const nextConfig = {experimental: { appDir: true, },};export default nextConfig;2. server 작성내가 만약 폴더를 src/pages/api/any.ts로 작성했다면/api/any로 아래 코드..

여기서 이해하고 넘어가야 할 개념은 React는 build시 index.html을 생성하지만, Next.js는 서버 파일을 생성한다.즉, Next는 말 그대로 서버이며, 백엔드에서 작동한다.그렇다면 Next는 클라이언트에서 값을 받아서 화면을 동적으로 변화시키기 위해선 어떻게 해야할까?해당 page.tsx가 CSR이 필요한 경우(React Hooks를 사용한 경우)는 당연히 SSR로 돌릴 수 없다.그렇기에 React Hooks을 사용한 코드는 맨 윗줄에"use client";를 추가함으로서 기존의 React와 똑같이 작동시킬 수 있다.다만 CSR을 사용하면 Next를 사용하는 의미가 없어지기 때문에, 변화하는 컴퍼넌트만을 잘 나눠야 성능을 최적화 시킬 수 있다.use client의 예"use client..

Next.js는 React를 서버 사이드 렌더링(SSR)하기 위한 프레임 워크이며 React의 확장판이라고 보면 된다.npx create-next-app@latest my-next-app1. import alias?next 생성시 사용자에게 물어보는 alias 설정이다.import 시 우리는 ../ ./ 이렇게 경로를 지정하는데, 기본적인 root 를 설정할 수 있다.따로 이름을 지정해줄 수 있는 것 같지만, 무슨 오류가 날지 모르니 default 값을 사용한다.기본 값 = @/* (그냥 엔터치면 자동 설정된다.)예시로 ../../some/comp/page.ts 같이 ../를 붙여 뒤로가서 사용하던걸@/some/comp/page.ts 처럼 사용할 수 있다는 뜻2. 기본 구성을 알아보자public기존 Re..