Language/Next.js
-
getStaticPaths 란? getStaticPaths는 Next.js 프레임워크에서 사용되는 중요한 메서드 중 하나입니다. 이 메서드는 동적 경로를 다룰 때 사용되며, 웹 애플리케이션의 성능 향상과 SEO 최적화에 중요한 역할을 합니다. 동적 경로(dynamic routes)의 개념 동적 경로는 웹 애플리케이션에서 특정 데이터에 기반하여 동적으로 페이지를 생성해야 할 때 사용됩니다. 예를 들어, 블로그 게시물이나 제품 페이지와 같은 경우, 각각의 게시물 또는 제품은 고유한 경로를 가져야 합니다. 이때 동적 경로를 사용하여 각 항목에 대한 페이지를 동적으로 생성할 수 있습니다. getStaticPaths 메서드의 역할 getStaticPaths 메서드는 Next.js에서 동적 경로를 다룰 때 사용되는..
[Next.js] getStaticPaths - 12버전getStaticPaths 란? getStaticPaths는 Next.js 프레임워크에서 사용되는 중요한 메서드 중 하나입니다. 이 메서드는 동적 경로를 다룰 때 사용되며, 웹 애플리케이션의 성능 향상과 SEO 최적화에 중요한 역할을 합니다. 동적 경로(dynamic routes)의 개념 동적 경로는 웹 애플리케이션에서 특정 데이터에 기반하여 동적으로 페이지를 생성해야 할 때 사용됩니다. 예를 들어, 블로그 게시물이나 제품 페이지와 같은 경우, 각각의 게시물 또는 제품은 고유한 경로를 가져야 합니다. 이때 동적 경로를 사용하여 각 항목에 대한 페이지를 동적으로 생성할 수 있습니다. getStaticPaths 메서드의 역할 getStaticPaths 메서드는 Next.js에서 동적 경로를 다룰 때 사용되는..
2023.10.02 -
Next.js 13.5 소식을 알려드리겠습니다. Next.js 13.5는 2023년 9월 23일에 출시된 Next.js의 마이너 릴리스입니다. 이번 릴리스에서는 로컬 개발 환경의 성능과 안정성을 개선하는 데 중점을 두었습니다. Next.js 13.5의 주요 업데이트 사항은 다음과 같습니다. 22% 빠른 로컬 서버 시작: App & Pages Router를 사용하면 코드를 더 빠르게 반복할 수 있습니다. 29% 빠른 HMR (Fast Refresh): HMR은 페이지를 다시 로드하지 않고도 코드 변경 사항을 브라우저에서 확인할 수 있습니다. 이를 통해 Next.js 애플리케이션을 개발하고 디버그하는 속도가 훨씬 빨라집니다. 향상된 안정성: Next.js 13.5에는 프레임워크의 전체적인 안정성을 개선하기 ..
[Next.js] 13.5 소식, 무엇이 업데이트 되었을까?Next.js 13.5 소식을 알려드리겠습니다. Next.js 13.5는 2023년 9월 23일에 출시된 Next.js의 마이너 릴리스입니다. 이번 릴리스에서는 로컬 개발 환경의 성능과 안정성을 개선하는 데 중점을 두었습니다. Next.js 13.5의 주요 업데이트 사항은 다음과 같습니다. 22% 빠른 로컬 서버 시작: App & Pages Router를 사용하면 코드를 더 빠르게 반복할 수 있습니다. 29% 빠른 HMR (Fast Refresh): HMR은 페이지를 다시 로드하지 않고도 코드 변경 사항을 브라우저에서 확인할 수 있습니다. 이를 통해 Next.js 애플리케이션을 개발하고 디버그하는 속도가 훨씬 빨라집니다. 향상된 안정성: Next.js 13.5에는 프레임워크의 전체적인 안정성을 개선하기 ..
2023.09.24 -
빠르게 변화하는 웹 개발 세계에서 올바른 JavaScript 프레임워크를 선택하는 것은 중요한 결정입니다. 이 분야에서 두 가지 주목할 만한 경쟁자는 Next.js와 React입니다. 이 기사에서는 Next.js와 React를 비교하여 다음 웹 프로젝트를 위한 정보를 제공합니다. 목차 Next.js와 React 소개 기본적인 차이점 서버 측 렌더링 (SSR) 라우팅 데이터 가져오기 SEO 친화성 프로젝트 설정 Next.js React 성능 평가 로드 시간 SEO 성능 클라이언트 측 렌더링 (CSR) 학습 곡선 커뮤니티와 생태계 서버리스 함수 배포 및 호스팅 사례 연구 Next.js 선택 시 React 선택 시 결론 Next.js와 React 소개 Next.js와 React는 둘 다 JavaScript 프..
Next.js vs React.js 비교 및 차이빠르게 변화하는 웹 개발 세계에서 올바른 JavaScript 프레임워크를 선택하는 것은 중요한 결정입니다. 이 분야에서 두 가지 주목할 만한 경쟁자는 Next.js와 React입니다. 이 기사에서는 Next.js와 React를 비교하여 다음 웹 프로젝트를 위한 정보를 제공합니다. 목차 Next.js와 React 소개 기본적인 차이점 서버 측 렌더링 (SSR) 라우팅 데이터 가져오기 SEO 친화성 프로젝트 설정 Next.js React 성능 평가 로드 시간 SEO 성능 클라이언트 측 렌더링 (CSR) 학습 곡선 커뮤니티와 생태계 서버리스 함수 배포 및 호스팅 사례 연구 Next.js 선택 시 React 선택 시 결론 Next.js와 React 소개 Next.js와 React는 둘 다 JavaScript 프..
2023.09.10 -
Next.js와 Tailwind CSS는 현재 웹 개발에서 매우 인기 있는 기술들입니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 지원하여 웹 애플리케이션의 성능과 SEO를 향상시킬 수 있습니다. Tailwind CSS는 기본 CSS를 대체하는 유틸리티 기반의 CSS 프레임워크로, 간결한 클래스명으로 쉽게 스타일을 적용할 수 있습니다. 이번 글에서는 Next.js와 Tailwind CSS를 함께 사용하는 방법에 대해 자세히 알아보겠습니다. 목차 Next.js 소개와 기본 개념 Next.js란 무엇인가? 서버 사이드 렌더링이란? 정적 사이트 생성이란? Tailwind CSS 소개와 기본 개념 Tailwind CSS란 무엇인가? 유틸리티 기반의 스타일링이란? ..
Next.js와 Tailwind CSS 적용하기Next.js와 Tailwind CSS는 현재 웹 개발에서 매우 인기 있는 기술들입니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 지원하여 웹 애플리케이션의 성능과 SEO를 향상시킬 수 있습니다. Tailwind CSS는 기본 CSS를 대체하는 유틸리티 기반의 CSS 프레임워크로, 간결한 클래스명으로 쉽게 스타일을 적용할 수 있습니다. 이번 글에서는 Next.js와 Tailwind CSS를 함께 사용하는 방법에 대해 자세히 알아보겠습니다. 목차 Next.js 소개와 기본 개념 Next.js란 무엇인가? 서버 사이드 렌더링이란? 정적 사이트 생성이란? Tailwind CSS 소개와 기본 개념 Tailwind CSS란 무엇인가? 유틸리티 기반의 스타일링이란? ..
2023.08.04 -
서문 Next.js는 개발자들이 React를 사용하여 현대적이고 효율적인 웹 애플리케이션을 빠르게 구축할 수 있게 해주는 인기 있는 프레임워크입니다. Next.js의 라우팅 시스템은 애플리케이션 내에서 다양한 페이지 간의 이동을 가능하게 해줍니다. asPath, query, 그리고 route는 Next.js 라우터의 중요한 개념입니다. 이 기사에서는 이들의 차이점과 각각의 용도에 대해 자세히 알아보겠습니다. 목차 Next.js 라우터 개요 asPath 소개 query 소개 route 소개 asPath와 query의 차이점 asPath와 route의 차이점 query와 route의 차이점 asPath, query, 그리고 route의 사용 사례 주의할 점 결론 자주 묻는 질문 (FAQ) 1. Next.js..
Next.js Router asPath, query, and route: 차이서문 Next.js는 개발자들이 React를 사용하여 현대적이고 효율적인 웹 애플리케이션을 빠르게 구축할 수 있게 해주는 인기 있는 프레임워크입니다. Next.js의 라우팅 시스템은 애플리케이션 내에서 다양한 페이지 간의 이동을 가능하게 해줍니다. asPath, query, 그리고 route는 Next.js 라우터의 중요한 개념입니다. 이 기사에서는 이들의 차이점과 각각의 용도에 대해 자세히 알아보겠습니다. 목차 Next.js 라우터 개요 asPath 소개 query 소개 route 소개 asPath와 query의 차이점 asPath와 route의 차이점 query와 route의 차이점 asPath, query, 그리고 route의 사용 사례 주의할 점 결론 자주 묻는 질문 (FAQ) 1. Next.js..
2023.07.07 -
소개 라우팅은 웹 애플리케이션 개발에서 중요한 요소입니다. 사용자가 다른 URL로 이동할 때 적절한 페이지를 표시하는 것은 웹 애플리케이션의 사용성과 경험에 큰 영향을 미칩니다. Next.js useRouter는 Next.js 프레임워크에서 제공하는 강력한 라우팅 도구입니다. 이 도구를 사용하면 Next.js 애플리케이션에서 손쉽게 라우팅을 구현할 수 있습니다. 이 기사에서는 next.js useRouter의 기능과 사용법에 대해 자세히 살펴보겠습니다. 목차 Next.js란? useRouter 소개 useRouter의 주요 기능 useRouter를 사용한 동적 라우팅 useRouter를 사용한 쿼리 파라미터 처리 useRouter를 사용한 페이지 리다이렉션 useRouter의 추가 기능 useRouter..
next.js useRouter: 모든 라우팅 니즈를 충족시키는 도구소개 라우팅은 웹 애플리케이션 개발에서 중요한 요소입니다. 사용자가 다른 URL로 이동할 때 적절한 페이지를 표시하는 것은 웹 애플리케이션의 사용성과 경험에 큰 영향을 미칩니다. Next.js useRouter는 Next.js 프레임워크에서 제공하는 강력한 라우팅 도구입니다. 이 도구를 사용하면 Next.js 애플리케이션에서 손쉽게 라우팅을 구현할 수 있습니다. 이 기사에서는 next.js useRouter의 기능과 사용법에 대해 자세히 살펴보겠습니다. 목차 Next.js란? useRouter 소개 useRouter의 주요 기능 useRouter를 사용한 동적 라우팅 useRouter를 사용한 쿼리 파라미터 처리 useRouter를 사용한 페이지 리다이렉션 useRouter의 추가 기능 useRouter..
2023.07.06 -
Next.js Dynamic Import(동적 가져오기): 성능 및 사용자 경험 개선 웹 개발 세계에서 성능과 사용자 경험은 성공적인 웹 사이트를 위한 두 가지 중요한 요소입니다. 인기 있는 React 기반 프레임워크인 Next.js는 개발자가 동적 가져오기를 사용할 수 있도록 하여 두 가지 모두를 향상시키는 솔루션을 제공합니다. 이 기사에서는 Next.js 동적 가져오기를 살펴보고 이것이 웹사이트 성능과 사용자 경험을 어떻게 향상시킬 수 있는지 살펴보겠습니다. Next.js Dynamic Import 무엇인가? Next.js 동적 가져오기는 개발자가 모든 것을 미리 로드하는 대신 필요에 따라 구성 요소 또는 모듈을 로드할 수 있도록 하는 기능입니다. 코드 분할이 가능하므로 필요할 때 코드의 필요한 부분..
Next.js Dynamic Import 어떻게 사용할까?Next.js Dynamic Import(동적 가져오기): 성능 및 사용자 경험 개선 웹 개발 세계에서 성능과 사용자 경험은 성공적인 웹 사이트를 위한 두 가지 중요한 요소입니다. 인기 있는 React 기반 프레임워크인 Next.js는 개발자가 동적 가져오기를 사용할 수 있도록 하여 두 가지 모두를 향상시키는 솔루션을 제공합니다. 이 기사에서는 Next.js 동적 가져오기를 살펴보고 이것이 웹사이트 성능과 사용자 경험을 어떻게 향상시킬 수 있는지 살펴보겠습니다. Next.js Dynamic Import 무엇인가? Next.js 동적 가져오기는 개발자가 모든 것을 미리 로드하는 대신 필요에 따라 구성 요소 또는 모듈을 로드할 수 있도록 하는 기능입니다. 코드 분할이 가능하므로 필요할 때 코드의 필요한 부분..
2023.03.26 -
Next.js 에서는 기본적으로 Environment Variables(환경변수)에 대해서 기본적으로 지원하고 있어서, 별도의 라이브러리 설치나 설정 없이 사용 가능하다. .env.local을 사용하여 환경 변수 불러옴 NEXT_PUBLIC 접두사 사용하여 환경 변수를 브라우저에 노출 * 환경변수(Environment Variables)란 무엇이고, 사용하는 이유? 환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이..
Nexet.js Environment VariablesNext.js 에서는 기본적으로 Environment Variables(환경변수)에 대해서 기본적으로 지원하고 있어서, 별도의 라이브러리 설치나 설정 없이 사용 가능하다. .env.local을 사용하여 환경 변수 불러옴 NEXT_PUBLIC 접두사 사용하여 환경 변수를 브라우저에 노출 * 환경변수(Environment Variables)란 무엇이고, 사용하는 이유? 환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이..
2023.02.26 -
Next.js Image 컴포넌트 Next.js Image 컴포넌트는 SEO 최적화를 위하여 Next.js(Vercel)에서 개발한 컴포넌트이다. 보통 HTML에서 태그에서 width와 height 값을 입력하지 않으면 구글이나 기타 포털사이트에서 SEO 관련하여 나쁜 점수를 받게 된다. Cumulative Layout Shift(누적 레이아웃 이동, CLS)라는 항목인데, 초기 이미지 로딩시 이미지가 밀리는 현상을 말한다. 따라서 Next.js Image 컴포넌트를 쓰게 되면 필수적으로 `src, alt, width, height` 값을 필수적으로 입력해야한다. import Image from 'next/image' ... https://nextjs.org/docs/api-reference/next/i..
Next.js Image 100% 사이즈Next.js Image 컴포넌트 Next.js Image 컴포넌트는 SEO 최적화를 위하여 Next.js(Vercel)에서 개발한 컴포넌트이다. 보통 HTML에서 태그에서 width와 height 값을 입력하지 않으면 구글이나 기타 포털사이트에서 SEO 관련하여 나쁜 점수를 받게 된다. Cumulative Layout Shift(누적 레이아웃 이동, CLS)라는 항목인데, 초기 이미지 로딩시 이미지가 밀리는 현상을 말한다. 따라서 Next.js Image 컴포넌트를 쓰게 되면 필수적으로 `src, alt, width, height` 값을 필수적으로 입력해야한다. import Image from 'next/image' ... https://nextjs.org/docs/api-reference/next/i..
2023.02.11 -
다국어 지원을 위해서 i18n 라이브러리를 사용하게 되는데, 기존 리액트만 쓰게 될 경우 react-i18next 라이브러리를 많이 사용하게 된다. 다만 Next.js 를 쓰게 될 경우에는 react-i18next 도 사용 가능하지만 SSR(Server side Rendering)을 하려고 한다면 next-i18next 사용을 권장한다. 라이브러리 https://github.com/isaachinman/next-i18next 폴더 구조 폴더 구조는 라이브러리 샘플(https://github.com/isaachinman/next-i18next/tree/master/examples/simple) 예시 기준으로 작성하였다. 임의로 바꿔도 상관은 없다. 1. 먼저 해당 라이브러리를 설치 yarn add next..
next-i18next 설치 및 사용법다국어 지원을 위해서 i18n 라이브러리를 사용하게 되는데, 기존 리액트만 쓰게 될 경우 react-i18next 라이브러리를 많이 사용하게 된다. 다만 Next.js 를 쓰게 될 경우에는 react-i18next 도 사용 가능하지만 SSR(Server side Rendering)을 하려고 한다면 next-i18next 사용을 권장한다. 라이브러리 https://github.com/isaachinman/next-i18next 폴더 구조 폴더 구조는 라이브러리 샘플(https://github.com/isaachinman/next-i18next/tree/master/examples/simple) 예시 기준으로 작성하였다. 임의로 바꿔도 상관은 없다. 1. 먼저 해당 라이브러리를 설치 yarn add next..
2021.01.04