반응형 react3 Next.js + Supabase 프로젝트 - (2) Next 기초 설정 이 게시글에 이어지는 내용입니다 => 이전 포스팅 : Next.js + Supabase 프로젝트 - (1) Next.js + Supabase 프로젝트 - (1)시작하기에 앞서 Next.js란?“개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.서kyurasi.tistory.com 위 포스팅에서 프로젝트를 설치한 뒤, 해당 프로젝트 폴더로 이동합니다 cd 방금생성한프로젝트명 프로젝트에 생성된 구조에 대해서는 위의 포스팅에서 간략하게 다루어 보았습니다. 이번에는 Tailwind css 를 next 프로젝트에서 어떻게 사용하는지 확인해보겠습니다 아래 링크는 tailwind css 에서 제공하는 ne.. 2025. 6. 28. Next.js + Supabase 프로젝트 - (1) Next 프로젝트 생성 시작하기에 앞서 Next.js란?“개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.서버에서부터 html을 최적화해서 웹으로 내려주기 때문에 SEO(검색엔진)에 큰 도움이 됩니다.사이즈가 크지않은 개인 프로젝트 정도의 규모라면 별도로 서버구축을 할 필요 없이 Next.js만으로 서버 구축까지 전부 가능합니다. (API 구축 가능) 1. 프로젝트 생성npx create-next-app@latest 프로젝트명 사실상 기본 세팅은 전부 엔터를 눌렀습니다ㅎㅎ 일단 타입스크립트와 tailwind 를 사용할거라 전부 기본 설정대로 진행했습니다Typescript - yESLint - nTailwind CSS.. 2025. 6. 28. react Next.js + Supabase 프로젝트 최근 React 의 중요성이 아주 커지면서, 주니어 프론트엔드 개발자들에게는 React에 대한 지식은 선택사항이 아닌 필수 교양이 된 느낌이기도 합니다ㅎㅎ React 를 하면서 SEO 를 또 포기를 할 수는 없죠.이번 프로젝트에서 사용할 기술 스텍을 먼저 나열을 해보겠습니다 ReactRecoil, React QueryNext.jsSupabaseVercel Next.js는 React 기반의 웹 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등 다양한 기능을 제공하며, 웹 개발을 위한 편리한 도구 세트를 제공합니다. React가 UI 라이브러리라면, Next.js는 그 위에 구축된 풀스택 프레임워크로, 웹 애플리케이션의 전.. 2025. 6. 28. 이전 1 다음 반응형
