안녕하세요! 오늘은 Next.js와 NestJS 같은 백엔드 프레임워크를 비교해보고, 왜 일부 개발자들이 Next.js 대신 NestJS를 사용해 백엔드를 구축하는지에 대해 알아보려고 합니다. Next.js는 프론트엔드와 백엔드 모두를 처리할 수 있는 기능을 제공하지만, 특정 상황에서는 별도의 백엔드 프레임워크를 사용하는 것이 더 나은 선택일 수 있습니다. 그 이유를 함께 살펴보겠습니다. Next.js와 백엔드 프레임워크의 차이Next.js는 주로 React 기반의 프론트엔드를 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)으로 지원하며, 기본적인 API 라우팅 기능도 제공합니다. 이 때문에, 많은 개발자들이 Next.js를 사용해 프론트엔드와 백엔드를 동시에 처리하는 것을 고려하게 됩니다. 그..
최근 한 커뮤니티에서 한 개발자가 Next.js를 사용하여 개발한 웹 애플리케이션으로 $650의 수익을 올린 경험을 공유했습니다. 이 개발자는 불과 14개월 전 처음으로 코드를 작성하기 시작했으며, 이번 프로젝트는 그가 진지하게 진행한 첫 번째 프로젝트 중 하나였습니다. 이러한 성과는 Next.js의 강력한 기능과 유연성을 잘 보여줍니다. 그러나 Next.js가 모든 프로젝트에 적합한 것은 아닙니다. 이 글에서는 Next.js의 장점과 단점, 그리고 성공적인 앱 개발을 위한 전략에 대해 자세히 살펴보겠습니다. 1. Next.js의 장점Next.js는 다양한 기능을 내장하고 있어, 개발자들이 별도의 라이브러리를 설치하거나 백엔드를 따로 구축할 필요 없이 빠르고 효율적으로 애플리케이션을 개발할 수 있습니다...
안녕하세요? 요즘은 React 개발을 무조건 Next.js로 하는 추세인데요. 제가 다른 블로그에 쓴 좋은 글이 있어 소개하려고 합니다. Next.js에서 _document.js와 _app.js의 차이점 파헤치기 Next.js에서 _document.js와 _app.js의 차이점 파헤치기 Next.js에서 _document.js와 _app.js의 차이점 파헤치기 mycodings.fly.dev Next.js에서 _app.js 파일의 역할은? Next.js에서 _app.js 파일의 역할은? Next.js에서 _app.js 파일의 역할은? mycodings.fly.dev Next.js에서 _document.js 파일의 중요성과 역할 Next.js에서 _document.js 파일의 중요성 Next.js에서 _d..
안녕하세요? 이번 시간에는 Supabase 블로그 마지막 시간이 Search 기능 추가 시간입니다. 블로그 포스트의 생성, 조회, 업데이트, 삭제 기능을 완성했는데요. 남은 건 바로 검색 기능입니다. /pages/post/search.tsx 파일로 진행할 예정입니다. 일단 User-Authenticated 템플릿을 아래와 같이 준비합시다. import React, { useState } from "react"; import Link from "next/link"; import { GetServerSideProps } from "next"; import { useMessage } from "../../lib/message"; import { useFormFields } from "../../lib/util..
안녕하세요? 오늘은 TailwindCSS 3.0과 Next.JS에서 다크 모드(Dark Mode) 적용하는 방법에 대해 알아보겠습니다. 먼저, 빈 템플릿을 설치해 볼까요? npx create-next-app tailwind-dark-mode 열심히 설치하고 있네요. 이제 TailwindCSS 최신판을 설치해 봅시다. cd tailwind-dark-mode npm i -D tailwindcss@latest postcss@latest autoprefixer@latest TailwindCSS는 postcss와 autoprefixer 패키지가 필요합니다. 같이 설치해주셔야 합니다. 그다음에 TainwindCSS 초기화 명령을 실행시킵시다. npx tailwindcss init -p TailwindCSS 초기화 ..
안녕하세요? 오늘은 Supabase + NextJS 블로그 만들기 시리즈 마지막인 Post의 Modify, Delete에 대해 알아보겠습니다. 일단 /post/modify.tsx 파일을 만들었고 무엇을 수정, 삭제할지에 대한 정보는 브라우저의 주소창 쿼리를 이용할 예정입니다. NextJS의 다이내믹 라우팅으로도 할 수 있지만 좀 더 간단한 주소창 쿼리를 이용할 예정입니다. http://localhost:3000/post/modify?id=1 이런 식으로 주소 링크를 주면 해당 modify.tsx 파일에서 해당 id를 이용해서 수정, 삭제할 예정입니다. 일단 /post/modify.tsx의 로그인된 유저만 볼 수 있게 하는 템플릿을 준비해 보겠습니다. import React, { useEffect } fr..