# nextjs
i18n nextjs 다국어 설정 세팅
다국어 설정을 위한 Settingnpm i next-i18nextnext.config.jsconst { i18n } = require("./next-i18next.config"); module.exports = { i18n, };next-i18next.config.js
miragejs - fake server for nextjs
fake server 라이브러리npm i mirage베이스서버 세팅page단위돈 내고 쓰는 Postman이 최고시다
NextJs 정적페이지 배포 [S3 + IAM + Github Action][3]
내 포스팅을 보고있는 개발자분들이라면,,, AWS 계정 하나씩은 있을것이라고 생각해보고 회원가입 가이드는 사뿐히 무시하겠음본인은 한번 연습해보고 한거기에 이미 버킷 및 설정이 다 되어있습니다.버킷만들기를 눌러줍니다버킷이름을 지어야하는데본인은 bbakjun-github-
NextJs 정적페이지 배포 [S3 + IAM + Github Action][2]
자자 빌드를 해봅시다. 지난 포스팅에서 정적페이지 전용 빌드 스크립트로 바꿨고 next.config.js 설정도 변경하였으니 아마 아래와 같은 결과물이 나올것이라고 예상이 됩니다.내가 원하는것은 main 브랜치에 푸쉬할때 GitHub Action 에서 자동으로 빌드하여
정적 생성
NextJs의 경우 기본적으로 모든 페이지는 pre-render 하게 배치하는 특징을 가지고 있다.NextJs가 기본적으로 프리 렌더링을 사용하는 이유는 기존에 만들어 놓음으로써 클라이언트의 요청에서 신속하게 대응할 수 있으며, 이는 곳 퍼포먼스의 향상으로 이어지게 된
에러 페이지, 환경 변수
Next.js에서는 컴포넌트를 만들어 에러 페이지를 불러 오지 않는다.에러페이지를 만약 필요할 때마다 서버에서 렌더링된 상태로 가져온다면, 그만큼 서버에 요청하는 것이 많아지고, 비용이 증가되어 퍼포먼스의 성능이 하락된다.그래서 Next.js에서는 이런 에러 페이지를
서버 사이드 렌더링
SSR을 사용한 솔루션을 사용하기 위해서는 getServersideProps 함수를 사용하는 방법이 있다.getServerSideProps 는 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져온다.fetch api를 통해 data 값을 가져오고 data를 Page
Dynamic Routes, link
Next.js의 기능 중에서 가장 강력한 기능 중 하나인 동적 라우팅이다.동적 라우팅은 말 그대로 정적으로 라우팅 페이지를 각각 만드는 것이 아닌 동적으로 페이지를 자동으로 생성하고 연결한다.id.js 파일을 생성하면 자동으로 해당 아이디의 값을 이름으로 가지는 JS
[oauth 2.0] 네아로 (네이버 아이디로 로그인) 구현 (next.js)
🙋♀️ 시작에 앞서 프로젝트를 진행하면서 소셜 로그인을 도입하자는 아이디어가 나왔고, 접근성 등을 고려해 네이버 아이디로 로그인을 구현하게 되었다.
Pages
next.js는 결국 페이지를 만들어 사용하는 프레임워크이다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 Pages 디렉토리 안에 넣으면 페이지를 만들 수 있다.그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있다.내보내진 페이지들은 자바스크립트 모듈이기 때문에,
Next.js 기본구조
Next.js의 기본 구조는 다음과 같다.\_app.js 는 client에서 띄우길 바라는 전체 컴포넌트의 레이아웃으로 이해하면 쉽다.공통 레이아웃 이므로 최초에 실행되어 내부에 들어갈 컴포넌트를 실행한다.지속적으로 띄울 레이아웃페이지를 탐색 할 때 유지componen
Next.js 시작
다이나믹 라우트를 이용한 직관적인 페이지 기반의 라우팅 시스템자동으로 페이지를 최적화데이터 요구사항 차단과 함께 서버에서 렌더링빠른 페이지 로딩을 위해 자동으로 코드 스플릿팅최적화된 페이지 프리페치를 사용한 클라이언트 라우팅HMR(Hot Module Replacemen
Next.js 란 무엇인가?
Next.js 는 한마디로 React Server Framework 라고 할 수 있다.우리는 Next.js 의 도움을 받아 각종 Front-end & Server configurations, Webpack, Babel, TypeScript 등의 골치아픈 설정을 더이상
.png?w=768)