본문 바로가기

next.js21

[Next.js 13] 서버 포트 번호 변경 방법 Next.js 에서 서버를 구동하면, 기본적을 3000번 포트에서 서버가 실행된다. 물론 개발 서버와 프로덕션(배포용) 서버의 포트 번호 변경도 가능하며, 아래의 방법대로 진행하면 된다. # 서버 포트 변경 방법 개발 서버 및 프로덕션 서버의 포트를 변경하려면, package.json 파일에서 `-p 포트번호` 옵션을 추가하여 스크립트를 실행해주면 된다. "scripts": { "dev": "next dev -p 5000", "build": "next build", "start": "next start -p 6000", "lint": "next lint" } 예를 들어, 위와 같이 스크립트 수정후, - `npm run dev` 명령어를 실행하여 개발 모드로 서버를 구동하면, `http://localhos.. 2023. 8. 18.
[Next.js 13] 설치, 빌드, 서버 구동 방법 (개발 모드/프로덕션 모드) # Next.js 13 설치 방법 기본적으로 Node.js 16.8 이상이 설치된 상태에서 진행해야 한다. (node.js 공식 홈페이지에 방문하여 OS에 맞는 설치파일을 다운로드 받아서 설치하면 된다.) 1. 설치 `create-next-app` 명령어를 사용하여 Next.js를 설치하면, 관련 설정까지 자동으로 세팅된다. 터미널에서 상에서 원하는 경로로 이동 후, 아래 명령어를 실행한다. npx create-next-app@latest 만약 현재 경로 상에 설치하려면, 명령어 뒤에 마침표( . )를 하나 붙여준다. npx create-next-app@latest . 2. 세팅 설치를 시작하면 터미널 상에서 몇가지 질문을 받게 된다. 프로젝트 이름, 사용할 라이브러리, 추가 설정에 관한 것으로 추천하는.. 2023. 8. 18.
[Next.js 13] Next.js란? 주요 기능과 역할 # Next.js란 Next.js는 React로 웹 서비스를 구축할 수 있는 풀스택 프레임워크이다. 구체적으로 Next.js는 다음과 같은 역할을 수행할 수 있다. Front-End Server: 브라우저의 요청을 받으면, React로 렌더링한 HTML페이지를 응답한다. API Server: 클라이언트의 API 콜을 받아서 JSON등을 응답한다. Back-End Server: Node.js 환경에서 구동되므로, 데이터 베이스 연동, 파일시스템 접근 등이 가능하다. 이 외에도 복잡한 번들링, 컴파일 등의 설정 작업을 Next.js 에서 기본적으로 제공해주기 때문에, 개발자는 좀더 웹 개발에만 집중할 수 있게 되어 아주 유용하다. (+성능 또한 좋다) 한마디로 Node.js의 Express와 유사한 프레임워.. 2023. 8. 18.
[React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 - 모달창 초간단 구현 방법 HTML 에서 기본 제공하는 dialog 엘리먼트를 이용하면, 아래의 2가지를 아주 쉽게 구현할 수 있다. 1. 모달창 2. 다이얼로그 모달창과 다이얼로그의 차이는 - 모달창: dialog 엘리먼트 외부 영역이 불투명하게 dim 처리되고, 스크롤을 제외한 인터랙션(클릭 등)이 허용되지 않는다. - 다이얼로그: 툴팁처럼 노출되며 인터랙션에 영향을 미치지 않는다. dialog 엘리먼트를 이용하면, React에서 useState 나 외부 상태 관리 라이브러리 등을 사용하지 않아도 아주 쉽게 모달창을 구현할 수 있다. 당연히 Next.js 13 환경에서도 동일하게 모달창을 구현할 수 있다. 1. 모달창 dialog 엘리먼트는 비노출 상태가 디폴트이며, (open 속성을 t.. 2023. 8. 15.
[Next.js 13] async 서버 컴포넌트 JSX/Promise 반환 에러 해결 방법 # Async 서버 컴포넌트 Promise 반환 이슈 Next.js13에서 Data Fetching 등을 위해 async 함수 형태의 Server Component 를 사용하면 아래와 같은 에러가 뜰 때가 있다. 'ServerComponent' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786) # 원인 Next.js 13의 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환한다. React .. 2023. 5. 12.
[AWS|GCP EC2] React+Next.js HTTPS 도메인 적용 방법 (Nginx 리버스프록시 연결 + snapd SSL 인증서 자동 갱신) # AWS | GCP : EC2에서 React+Next.js 서버 https 적용방법 AWS나 EC2 인스턴스에서 Next.js 기반의 React 프로젝트를 구동하고, SSL인증서를 설치(+자동갱신)하여 HTTPS로 연결하는 방법을 정리한다. 이 글은 Nginx 리버스 프록시와 Certbot을 통한 Let's Ecrypt 인증서를 사용한다. # 작업 순서 및 내용 순서 작업 내용 1 도메인 AWS|GCP IP 연결 설정 2 Next.js 배포용 설정 추가(+GitHub 업로드) 3 EC2 접속 및 Node.js 설치 4 GitHub에서 소스코드 Clone 해오기 5 npm 패키지 설치 6 .env 설정파일 생성 7 Next.js프론트 서버 빌드 및 구동 8 Nginx 설치/설정/구동 9 certbot-a.. 2022. 9. 23.
[React] Next.js 환경 구글 애널리틱스(GA) 적용 방법 # React + Next.js 환경 구글 애널리틱스(GA) 적용 방법 1) 단순 React 환경과 2) Next.js 환경에서 GA 적용 방법을 정리한다. GA4 기준으로 작성했다. 1) 단순 React 환경(CSR)에서 Google Analytics 적용 방법 1. GA 스크립트 복사 - 애널리틱스 홈 > 관리 > 데이터 스트림 > 웹: 사이트 클릭 > Google태그: 태그안내보기 > 직접설치 2. GA 스크립트 적용 - public/index.html 파일의 내부에 스크립트 적용 끝. 2) Next.js 환경에서 Google Analytics 적용 방법 Next.js 환경의 경우, 추가 작업이 필요하다. 다행히 Next.js 를 만든 Vercel에서 해당 방법을 제공한다. https://githu.. 2022. 9. 22.
[Next.js] 환경변수 사용 방법: .env파일 (development, production, local) # Next.js 환경변수(Environment Variables) 사용 방법 Next.js는 아래의 3가지 방식으로 환경변수 기능을 지원한다. 1. process.env.NODE_ENV : 구동환경 체크용 환경변수 2. .env 파일 : 구동 환경별 환경변수 적용 파일 3. NEXT_PUBLIC_ : 브라우저에서 참조하기 위한 Prefix 각각의 기본적인 사용법을 정리해 본다. 1. process.env.NODE_ENV : 구동환경 체크 변수 - Next.js는 자동으로 process.env.NODE_ENV 변수를 생성하고, 구동 환경에 따라 아래의 3가지 값을 주입해 준다. 1) development : 개발 환경(npm run dev로 구동한 경우) 2) production : 배포 환경(npm r.. 2022. 8. 25.
[React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) # Next.js와 Redux 설정에 대하여 Next.js와 Redux를 연동하는 것은 생각보다 간단하지 않다. 왜냐하면, 본질적으로 Next.js 와 Redux 의 출신성분이 다르기 때문이다. 단순하게 정리하면, Next.js는 서버에서 돌아가고, Redux는 클라이언트(브라우저)에서 돌아간다. 여러 브라우저들에서 제각각 돌아가는 Redux의 전역상태를 서버에서 돌아가는 Next.js 에서 사용하려면 일이 복잡해진다. 이 글에서는 이에 대해 좀더 자세히 알아보고, 실제 설정하는 방법을 정리한다. (Next.js + Redux-Toolkit + TypeScript 연동 코드는 하단에 따로 정리해두었다. ) # Next.js 와 Redux의 관계 1. Next.js 는 "서버" 프레임워크다. 1) Next.. 2022. 8. 23.

티스토리툴바