프론트엔드/Next.js 썸네일형 리스트형 Next.js 시작하기 인프런(inflearn) 강의 할인 쿠폰 Next.js 기초를 알려주는 인프런(inflearn) 강의의 링크와 할인 쿠폰을 첨부합니다. 강의 링크: https://inf.run/u46D Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런 www.inflearn.com 쿠폰 번호: 15848-7a600076632d 쿠폰을 사용하면 44,000 -> 29,900원으로 수강이 가능합니다.(100회까지 이용 가능하도록 설정되어있습니다.) 아래의 10가지 개념을 학습할 수 있습니다. 매장 지도 서비스를 만들며 배우는 Next.js API 10가지 Point ✅ next/link로 지도 페이지/피드백 페이.. 더보기 routeChange event로 page transition loading UI 구현하기 프로젝트: Co-Building 키워드: routeChange, Router.events, page transition 상황 Next.js에서 Page가 전환되는 동안 페이지 중앙에 Loading UI를 그려주고자 한다. 모든 페이지에 해당하는 기능이니 Custom _app.js 파일에서 처리할 수 있는 방법을 찾는다. 해결 방법 먼저 Loading UI 컴포넌트를 만든다. 이 프로젝트에서는 loading 상태임을 확인하는 boolean 변수를 SWR로 관리하고 있다. // Loading.jsx import React from 'react'; import styled from '@emotion/styled'; import useSWR from 'swr'; import { LOADING_KEY } from.. 더보기 Next.js에 PWA 적용하기 키워드: next-pwa, PWA, next.js 상황 Google I/O 2022와 2022 Apple WWDC에서 각각 chrome PWA 추가 기능과 Web Push Notification 지원에 관한 발표가 나오면서, 웹의 가능성이 더욱 넓어졌다. PWA를 프로젝트에서 제대로 사용해본 적은 없지만, 브라우저가 향하고 있는 방향성에 맞게 PWA를 간단하게나마 체험해보고자 한다. 해결 과정 Next.js 프로젝트에서 next-pwa 패키지를 설치한다. yarn add next-pwa next.config.js에서 next-pwa 패키지를 연결한다. /** @type {import('next').NextConfig} */ const withPWA = require('next-pwa'); module.e.. 더보기 Next.js SEO plugin 이용하기(feat. next-seo, next-sitemap) 키워드: next-seo, next-sitemap, SEO, robots.txt, sitemap, canonical URL 상황 지금까지는 Next.js 프로젝트에서 _document.tsx와 next/head를 이용하여 meta/link tag를 작성했다. next-seo 라는 패키지를 이용해서 더 간단하고 가독성있게 SEO 관련 설정을 하고자 한다. 해결 과정 next-seo 패키지를 설치한다. (https://www.npmjs.com/package/next-seo) yarn add next-seo 먼저 seo.config.js 파일을 생성하고, 모든 페이지에서 사용할 전역(Default) SEO properties를 작성한다. 설명을 위해 사이트 이름 등은 'example'로 한다. // seo.c.. 더보기 Next.js API routes CORS 대응하기 + hook 이중 호출 방지하기 프로젝트: tracking map키워드: Next.js, api routes, CORS, next.config.js, rewrites, strict mode, double-invoking상황 1Next.js에서 Naver Maps Directions 5 서비스의 driving(길찾기) API를 호출해야한다.API를 Next.js의 API routes를 이용하여 분리하고, CORS에도 대응하고자 한다.해결 방법 1먼저 api/driving.ts 파일을 만들어 API를 분리한다.(참고: start와 goal parameter를 입력값으로 하면, 네이버 길찾기 API를 이용하여 출발지와 목적지에 대한 paths(좌표들의 배열)를 return 하는 로직이다.) // Next.js API route suppo.. 더보기 Next.js를 통해 prefetch 최적화 기법 이해하기(feat.next/link) 프로젝트: 공우 홈페이지 키워드: prefetch, Link, SSR, SSG, CSR, Next.js, Chrome DevTools Network 상황 Next.js가 최초 진입한 페이지의 html파일만 가져온다는 사실은 알고 있었지만, 다른 페이지로 이동할 때 어떤 데이터가 언제 불러와지는지 정확히 알진 못했다. Next.js로 구현한 공우 홈페이지에서 Chrome Devtools Network 탭을 통해 궁금증을 해소하고자한다. 해결과정 먼저 공우 홈페이지에 들어가 network 탭에서 Doc 파일을 확인한다. 역시 최초 진입한 페이지의 html만 가져오고, 다른 페이지로 이동하여도 추가적인 html 요청은 없다. 다른 페이지에 대한 정보를 언제 가져오는지 알기위해 Fetch/XHR과 JS 탭을 확.. 더보기 Next.js에서 SSG 와 revalidate 사용하기 프로젝트: 공우 홈페이지 키워드: Next.js, SSG, getStaticPaths, getStaticProps 상황 공지사항 또는 뉴스(이하 포스트로 통일) 페이지(https://www.gongwoo.snu.ac.kr/notice, https://www.gongwoo.snu.ac.kr/news)에서 포스트 목록을 보여준다. 포스트를 클릭하면 news/123 같은 상세 페이지로 이동한다. 동아리 홈페이지이므로 SEO 최적화를 해야 한다. 따라서, 포스트의 상세 페이지들도 static 하게 build 해야 한다. 포스트 내용이 정적이기 때문에, 매 요청마다 html을 만드는 SSR 대신 getStaticProps를 사용하여 SSG로 구현한다. 배포 후 새로운 포스트가 만들어질 경우에도 해당 포스트에 대한.. 더보기 이전 1 다음
