본문 바로가기

Programing/Next.js28

Pages Routing : 기본 세팅 (+쿼리 스트링, 동적 라우팅, 404) 페이지 라우터든 앱 라우터든 Next.js에서 프로젝트를 생성하고 나면 Next.js에서 기본적으로 작성해 놓은 페이지가 보이게 된다. 이것들을 먼저 제거해주는 것부터 시작해서 페이지 라우터 방식에서는 프로젝트 초기 세팅을 어떻게 하는지 살펴보겠다.index.tsx 내용 제거dev 명령어로 개발 서버를 실행시켜 보면 이러한 페이지가 나온다. 내가 만든 페이지가 아니므로 index.tsx 파일에서 제거해주겠다. 아래 사진에서는 import문을 지우지 않았는데 import문과 inter까지 전부 지워주면 된다.그러면 이렇게 된다.global.css 제거배경에 깔린 이상한 줄무늬가 맘에 들지 않는다. 이런 전역 스타일을 제거해준다.그러면 이렇게 된다.새로운 라우트(페이지) 만들기페이지 라우터 방식에서는 기본적.. Programing/Next.js 2024. 8. 28.
Next.js의 구 라우팅 방법, Pages Router Pages Router란?지금 Next.js에 입문하는 사람은 App Router 방식으로 라우팅을 처리하도록 배웠을 것이다. 그게 가장 최신버전의 방식이다.그러나 넥스트 13 버전 이전까지는 페이지 라우터 방식이 라우트를 만드는 방식이었다. 페이지 라우터 방식은 파일을 기반으로 라우트를 만드는 가장 직관적인 방식이다. 넥스트 13 버전부터 도입된 앱 라우터 방식은 디렉토리 기반으로 라우트를 만든다는 것과 큰 차이가 있다고 보면 된다.지금은 넥스트 15버전까지 나왔기 때문에 13버전 이전까지 메인으로 사용된 라우팅 방식이라고 설명하면 굉장히 레거시하고 오래된 방식이고 쓰면 안 될 것 같이 보이지만, 그렇진 않다. 넥스트의 버전업이 너무 빨라서 13, 14, 15까지 너무 많이 버전이 올라간 것처럼 보이지.. Programing/Next.js 2024. 8. 27.
Next.js를 사용하는 이유 (자유도의 관점, CSR vs pre-rendering) 지난 번 포스팅에서 Next.js를 사용하는 이유에 대해서 간단하게 작성해보았었다. API 라우트 구축이 가능해서 풀스택 애플리케이션을 만들 수 있고... 프레임워크의 성격을 가지고 있어서 별도로 스타일링을 해주거나 라우팅을 하기에 더 빠르고 수월하다는 점... 등등 네 다섯 가지 예시를 들었던 것 같다. 그런데 사실 개념을 정리한 정도의 요약글이었고, 구체적인 개념들을 살펴보진 않았었다. 따라서 이번 글에서는 Next.js를 사용하는 그 이유에 대해서 심도있게 다뤄보고자 한다.만약 이 글을 보고도 공감이 안 된다면 쓰지 않아도 된다. 마치 Next.js의 영업사원을 자처하는 것 같지만 리액트 단독으로 앱을 개발한다고 해서 문제가 되는 것은 아니다. 다만 Next.js의 이점을 누리지 못할 뿐.리액트 공.. Programing/Next.js 2024. 8. 25.
Next.js 서버/클라이언트 환경에서 TanStack Query 사용하기 TanStack Query, devtools 설치yarn add @tanstack/react-query @tanstack/react-query-devtoolsQueryProvider 설정QueryProvider 컴포넌트를 정의하여 앱의 최상위 컴포넌트에 TanStack Query를 제공하는 설정을 한다.TanStack Query는 리액트에서 데이터 패칭, 캐싱, 동기화를 도와주는 라이브러리이다.devtools는 개발 도구로 현재 데이터의 상태를 웹 브라우저 우측 하단 플로팅 아이콘을 통해 보여주는 라이브러리이다.// src/utils/QueryProvider.tsx'use client';import { QueryClient, QueryClientProvider,} from '@tanstack/reac.. Programing/Next.js 2024. 8. 9.
Next.js API Route로 supabase 통신하기 API Route 정의import { createClient } from '@/utils/supabase/server';import { NextRequest, NextResponse } from 'next/server';export async function POST(req: NextRequest) { try { const supabase = createClient(); const tripData = await req.json(); const { data: trip, error } = await supabase .from('trips') .insert(tripData) .select(); /.. Programing/Next.js 2024. 8. 8.

티스토리툴바