Frameworks/Next.js

SWC란? Rust 기반 컴파일러 겸 번들러 최신 js 기능을 사용하는 js/ts 파일을 불러오고, 주요 브라우저에서 지원하는 코드로 변환한다. ( 단일 쓰레드 속도 Babel의 20배 ~ 70배 성능 향상 ) Next.js에서의 SWC Next.js는 빠른 빌드와, 로컬 개발의 즉각적인 피드백을 위해 SWC를 사용한다. 네이티브 컴파일을 활용하는 Rust 기반 컴파일러를 도입 최근 Next.js 12.1 추가기능 styled-components importSource legacy-decorators relay remove-react-properties remove-console 위의 6가지 기능이 Next.js의 컴파일러에 추가되었다.

ISR 이란? 이미 빌드된 웹에, 정적 페이지를 새롭게 추가하거나, 업데이트 할 수 있도록 하는 Next.js 기능 ( next build 를 지원하는 곳에서 작동한다 ) ISR 사용법 function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } // 이 함수는 서버사이드에서, 빌드시에 실행(호출)됨 // 만약 서버사이드에서 다시 호출된다면, 재검증이 활성화되고 새로운 요청이 들어옴 export async function getStaticProps() { const res = await fetch('https://.../posts') const posts = await res.json() return { props: { p..

next-auth란? next.js에서, 소셜 로그인 기능을 쉽게 추가해주는 Node.js 라이브러리 NextAuth.js Authentication for Next.js next-auth.js.org next-auth 사용법 // Next.js 프로젝트의 pages/api/auth/[...nextauth].js import NextAuth from 'next-auth' import AppleProvider from 'next-auth/providers/apple' import FacebookProvider from 'next-auth/providers/facebook' import GoogleProvider from 'next-auth/providers/google' import EmailProvide..

Next.js는 데이터를 불러오는 타이밍을 다양하게 지정할 수 있다. Next.js는 기본적으로 React.js 위에서 작동하는 프레임워크 이므로, 따로 지정하지 않는다면 CSR(Client Side Rendering) 방식으로 작동한다. 아래의 함수를 Next.js의 컴포넌트 아래에 작성해주면, 데이터를 불러오는 타이밍을 바꿀 수 있다! getServerSideProps - 서버측에서 데이터를 불러온 다음, 클라이언트(브라우저)에 전달한다. getStaticProps - Next.js에서 정적 사이트를 만든후, 클라이언트에 전달한다. getServerSideProps [ 필요성 ] Next.js의 page가 렌더링 되기 전에, 미리 데이터를 완벽하게 불러오고 싶을때 [ 작동방식 ] Next.js의 페이..

useRouter란? Next.js에서 함수형식으로 라우팅 할 수 있게 해주는 Next.js 기본 라이브러리 자주사용하는 useRouter 기능 router.push(URL) 해당 URL로 이동한다. router.replace(URL1, URL2) URL1으로 이동후, URL2로 주소만 변경한다. useRouter 사용법 1. router.push() // next.js 프로젝트 내부 import { useRouter } from "next.router" export default function Push(){ // 라우터 가져오기 const router = useRouter(); // 클릭시 "/" 경로로 이동하는 버튼 return router.push("/") } value="Push"/> } imp..

Router as, Link as, rewrites 란? 실제 URL정보를 사용자가 보지 못하도록 숨겨주는 Next.js 기능 Router as 사용법 import Router from 'next/router' function handleClick(){ Router.push('실제로 이동할 주소', '사용자에게 보여줄 주소') } Link as 사용법 Drive rewrites 사용법 next.config.js 파일에 설정해준다. const path = require("path"); /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, // rewrites 사용 async rewrites() { // arr..

해결하고 싶은 문제점 이전 게시글에서, Next.js에서는 pages 폴더 내부의 파일로 페이지를 관리한다고 했다. 하지만 이런 페이지들을 만들어야 할때는 어떻게 할까? 게시글 상세페이지 유저 프로필 페이지 위의 경우에, 하나씩 페이지를 직접 만들게 되면, 너무 많은 페이지를 만들어야 한다. Nest.js에서는 하나의 페이지를 공유하는 방식을 사용할 수 있고, 이를 사용해, 불필요한 반복작업을 줄일 수 있다. 해결방법 // 여러개의 게시글들 중에, 하나의 게시글 보여주기위한 페이지만들기 // pages/posts/[id].tsx // uri 매개변수 받아오기 위한 모듈 불러오기 import { useRouter } from 'next/router' const Post = () => { // useRout..

Vercel 이란? Next.js 개발팀에서 만든 프론트엔드 호스팅 사이트 Dashboard – Vercel vercel.com Vercel의 필요성 ( 프론트 엔드 호스팅 ) 데이터를 저장할 필요가 없는 사이트를 복잡한 절차 없이 간편하게 호스팅 할 수 있다. Vercel 사용법 ( Github 프로젝트 이용 ) Github Repository만들기 컴퓨터에 Next.js 프로젝트 만들기 ( Typescript ) 프로젝트 폴더로 이동후, Repository에 업로드하기 Github Repository에 로컬저장소가 업로드 된 모습 Vercel 에서 Github Repository 불러오기 ( Vercel , Github 연동 필요 ) 배포하기 배포된 사이트 주소 확인 Vercel과 Github 연동시..

Apollo client란? [GraphQL] Apollo Client 란? / 사용법 Apollo Client 란? GraphQL와, 클라이언트를 연결해주는 Node.js 패키지 Apollo Client 사용법 GraphQL & Apollo Client 설치 npm i graphql @apollo/client javascript에서 GraphQL 가져오기 // React 프로젝트.. defineall.tistory.com Next.js 프로젝트에 apollo client 설치하기 npm i @apollo/client Apollo client 만들기 // components/apollo.js import { ApolloClient, InMemoryCache } from '@apollo/client'; /..