생각하다 생각하다

Next.js에서 구글 폰트 사용하기 import { 폰트명 } from "next/font/google"; 에 글로벌 폰트 적용시키기 import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function MyApp({ Component, pageProps }) { return ( ) } 한 페이지에서만 폰트 사용하기 import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function Home() { return ( Hello World ) } Font F..

Next.js 13버전의 핵심기능을 알아보자 안녕하세용. Next.js가 13버전으로 업데이트 되었습니다. 이번 업데이트는 개발자들에게 더 나은 경험과 편의성을 제공해주면서 성능과 효율을 향상시키는 기능들이 많이 생겼습니다. 이번 포스팅에서는 nextjs 13버전의 주요 기능들과 업데이트된 API에 대해 알아보도록 하겠습니당. 🧐 본 포스팅은 공식문서를 토대로 작성되었으며, 모든 업데이트 사항을 포함하고 있지는 않습니다. 🍊 app/ 디렉토리 pages를 쓰던 이전 버전과는 다르게 13부터는 app/ 디렉토리를 사용하여 라우팅합니다. layout.js layout.js 라는 이름으로 파일을 생성하면 레이아웃을 사용할 수 있습니다. 이는 내비게이션 바와 같은 공통적인 UI를 구현하는 부분이 됩니다. exp..

Next.js 파일 기반 라우팅과 동적 라우팅을 알아보자 👀 React에서 주로 사용되는 라우팅 라이브러리는 코드 기반 라우팅을 제공하고 있습니다. 이 방식은 라우팅을 컴포넌트 내에서 코드로 관리하죠. 일반적으로 URL 경로에 대한 라우팅 정보와 해당 경로에 렌더링할 컴포넌트를 매핑하는 방식으로 사용하고 있죠. 반면에, Next.js에서는 조금 다르게 라우팅을 합니다. 간단히 말하면, 프로젝트 디렉토리 내의 페이지 파일의 경로와 URL 경로가 일치하는 것입니다. 오늘은 이 파일 기반 라우팅에 대해서 알아볼게요 🧐 🍊 파일 기반 라우팅이란? Next.js 에서는 파일을 기반으로 라우팅됩니다. 🙋🏻‍♀️ 파일 기반 라우팅? 이게 무슨 소린가요 🧑🏻‍🏫 파일 이름이 곧 url 경로가 된다는 소리입니다! 📍 페..

next.js 새 프로젝트 생성하기 안녕하세요! 요즘 react의 프레임워크인 next.js를 공부 중이에요. 오늘은 next.js 프로젝트 생성하는 방법에 대해서 알아볼게요. 👀 🍊 Next.js란? Next.js는 리액트 기반의 프레임워크로, 웹 애플리케이션 개발을 더욱 쉽고 효율적으로 만들어줍니다. 이 Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 페이지의 초기 로딩 속도를 향상시키고 SEO(검색 엔진 최적화)를 개선할 수 있습니다. 이는 사용자 경험과 웹 애플리케이션의 성능을 향상시켜줍니다. 🍊 Next.js의 특징 📍 서버 사이드 렌더링(SSR) Next.js는 서버 사이드 렌더링(Server Side Rendering)을 지원하여 초기 로딩 속도를 향상시키..