next.js 136 Next.js 13에서 TypeScript를 사용한 WebSocket 구현 WebSocket은 HTTP와는 다른 독특한 통신 방식을 사용하여, 실시간 양방향 통신을 가능하게 합니다. 이 글에서는 Next-Chat이라는 채팅 PWA 웹앱을 만들며 작성한 코드를 다시 분석해보려 합니다. 코드 줄마다 이해한 내용으로 주석을 적어놓았으니 코드만 보셔도 됩니다! app router 가 아닌 pages router 를 선택한 이유 next.js 13 이상으로 프로젝트 생성 시, App Router를 사용하면 HTTP 메소드인 GET, POST, PUT, DELETE를 API 함수명으로 사용하지 않으면 에러가 발생하므로, App Router를 선택하지 않고 page Router를 사용해서 해결하였습니다. WebSocket은 일반적인 HTTP와 다르므로, App router를 사용해서 API.. 2023. 12. 5. [error] 'PostList' cannot be used as a JSX component. Its return type 'Promise<Element>' is not a valid JSX element async 서버 컴포넌트를 타 컴포넌트에서 사용 시, 해당 에러 발생 'PostList' 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, key 에러 원인 현재 Next.js 13.2.4 버전의 경우, async / await 서버 컴포넌트를 타 컴포넌트에서 사용 시, Promise 를 리턴하는데, 타입스크립트를 사용 중이라면 타입 에러가 발생한다. 해결 방법 해당 에러는 Next.js 팀이 타입스크립트 팀과 해결 중에 있으며, 이 문제.. 2023. 4. 29. Next.js 개발 중, MongoDB 중복 접속 방지 TS 코드 src/util/database.ts 경로에 다음의 코드를 작성해두고 사용하자(근데 다른데 둬도 상관은 없당) .env.local 에 아래의 값을 넣어주자 MONGODB_URI="몽고DB 접속url" import { MongoClient } from "mongodb"; if (!process.env.MONGODB_URI) { throw new Error("Please add your Mongo URI to .env.local"); } const uri: string = process.env.MONGODB_URI; let client: MongoClient; let clientPromise: Promise; if (process.env.NODE_ENV === "development") { // In dev.. 2023. 4. 29. [error] SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) Next.js 13.2.4 버전 에서 클라이언트 컴포넌트 구현 시, 해당 에러 발생 error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () 에러 원인 next.js 13.3.1 미만의 버전의 window 환경에서 "use client" 를 사용하여 클라이언트 컴포넌트 구현 시, 일반 함수로 함수형 컴포넌트를 구현하면 해당 에러가 발생함(next.js 의 버그로 보임) 해결 방법 해당 버그는 next.js 13.3.1-canary.4 버전에서 해결되었다. 이전 버전을 사용 중이라면 클라이언트 컴포넌트 구현 시, 해당 컴포넌트를 일반 함수를 사용한 함수형 컴포넌트가 아닌, 화살표 함수를 사용한 함수형 컴포넌트로 구현하고 e.. 2023. 4. 13. 이전 1 2 다음
