본문 바로가기

Programing/Next.js28

개발 초기 아이템 리스트 스켈레톤 로더 구현하기 스크린샷코드// 스켈레톤 컴포넌트// 이후에 가져올 데이터가 렌더링 될 크기와 동일하게 맞춘다import React from 'react';const SkeletonLoader: React.FC = () => { return ( );};export default SkeletonLoader; 위 스켈레톤을 isLoading이나 isPending 등의 값을 반환 받거나 api route에서 로직.. Programing/Next.js 2024. 7. 31.
Next.js의 App Router와 Page Router의 차이 App Router? Page Router?Next.js는 Page Router 방식을 사용하다 13.4 버전 이후부터 App Router라는 개념이 도입되었다. App Router 방식은 비교적 정말 최신 기술이기 때문에 아직까지는 Next.js에서 Page Router 방식으로 제작되어 있는 프로젝트가 훨씬 많다.따라서 지금 막 입문한 프론트 엔드 엔지니어는 Page Router의 개선 버전인 App Router를 배우되, Page Router와의 차이점을 짚고 넘어가는 것도 중요할 것이다. Next.js를 배우기 위해서 인터넷에 검색을 하거나 강의를 찾아볼 때 이것이 App Router 방식의 자료인지 Page Router 방식의 자료인지 구분할 수 없다면 큰 혼동이 올 수 있다. 기본적으로 둘 다.. Programing/Next.js 2024. 7. 30.
Next.js 프로젝트 생성 npx create-next-app@latest✔ What is your project named? … my-Next-Project✔ Would you like to use TypeScript? … No / Yes✔ Would you like to use ESLint? … No / Yes✔ Would you like to use Tailwind CSS? … No / Yes✔ Would you like to use `src/` directory? … No / Yes✔ Would you like to use App Router? (recommended) … No / Yes✔ Would you like to customize the default import alias (@/*)? … No / Yes 필요에 .. Programing/Next.js 2024. 7. 17.
Next.js를 쓰는 이유가 무엇인가? Vite나 CRA가 제공하지 않는 기능들을 제공하는 프레임워크의 성격을 갖고 있기 때문에 많이 사용되는 추세이다.여러가지가 있겠지만 대표적으로는 아래와 같은 기능을 추가적으로 제공한다. 왜 쓰는 지 알고 쓰는 것과, 유행이라서 쓰는 것과는 하늘과 땅 차이라고 생각하여 정리를 하며 고민을 해볼 필요가 있다고 생각했다. Next.js의 차별점라우팅라우팅이란, 쉽게 이야기 해서 웹 페이지를 이동하는 것을 말한다. 페이지마다 고유한 URL 세그먼트가 존재해야 페이지 별로 이동할 수가 있는데, 이것을 가능하게 만들어 주는 것이 라우팅 기술이다.Vite나 CRA를 통해 React 프로젝트를 생성하게 되면 React-Router-Dom이라는 라이브러리를 설치해서 별도의 세팅을 해주어야 한다.하지만 Next.js에서는.. Programing/Next.js 2024. 7. 17.
PWA 프로젝트 셋업하기 패키지 설치yarn add next-pwayarn add -D webpacknext.config.mjs 설정import withPWAInit from "next-pwa";const withPWA = withPWAInit({ dest: "public",});/** @type {import('next').NextConfig} */const nextConfig = {};export default withPWA(nextConfig);public/manifest.json 설정{ "name": "My Next.js PWA", "short_name": "NextPWA", "description": "My awesome Next.js PWA!", "icons": [ { .. Programing/Next.js 2024. 7. 16.

티스토리툴바