Next.js
React에서 SSR을 구현하기 위한 프레임워크
npx create-next-app@latest
npx create-next-app@latest --typescript #타입스크립트 탬플릿
#yarn
yarn create next-appSSR (Server-Side-Rendering)
기존 React는 CSR(Client-Side-Rendering)으로 빈 html을 띄워주면 그때 js파일을 해석하여 페이지를 랜더링하는 방식. 이 방식은 html이 완성되지 않은 상태에서 페이지를 불러오기 때문에 크롤링에 적합하지 않다. 검색 엔진은 크롤링을 바탕으로 하기 때문에 CSR 방식을 사용하는 페이지들은 검색 노출도가 떨어진다.
반면 SSR은 클라이언트 대신, 서버에서 페이지를 랜더링한다. Next.js는 이처럼 SSR을 이용하여 사용자와 검색 엔진 클롤러에 랜더링하여 제공한다.
Next.js 프로젝트 기본 구조
pages : App을 구성할 페이지들
- index.tsx: 루트(메인)페이지
- _apt.tsx: 공통 레이아웃, 모든 페이지 진입 전 통과하는 인터셉터
public : 이미지 등 static asset
styles : 스타일링 처리
- 모듈 CSS로 종속적으로 컴포넌트 스타일링, module_name.module.css 형식
Next.config.js : Next js 웹팩 설정
Data Fetching
Nextjs에서 데이터를 가져오는 방법
1) getStaticProps : static generation으로 빌드할때 데이터 로드
export async function getStaticProps(context){
return{
props: {**data**}
}
}- 사용자 요청보다 먼저 필요한 데이터
- 데이터를 공개적으로 캐시할 수 있을 때
- 미리 랜더링되어야하는 데이터
예시 : posts 데이터 전달
function Blog({[posts}){
return{
<ul>
{posts.map((post)=>(
<li>{posts.title}</li>
))}
</ul>
}
}
//called at build time
export async function getStaticProps(){
//request to get 'posts'
const res = await fetch('path')
const posts = awiat res.json()
//return props
return{
props: {
posts
}
}
}
2) getStaticPath : static generation으로 데이터 기반으로 프리 랜더링시 동적 라우팅 구현
export async function getStaticPaths(){
return {
paths: [
{params: {**data**}}
],
fallback : true // false, 'blocking'
}
}- 동적 라우팅이 필요할 때 사용하여 경로 정의
- paths : 프리 랜더링할 경로
- params : 페이지 경로 상에서 동적으로 변하는, 전달할 부분
- fallback : 리턴 페이지 설정 여부
- false: 404 ERROR 페이지- ture : 사용자 지정 fallback 페이지
// Define Fallback Page if(router.isFallback){ return <div>Loading...</div> }
- ture : 사용자 지정 fallback 페이지
3) getServerSideProps : SSR 요청이 있을 때 데이터 로드
export async function getServerSideProps(context){
return{
props : {**data**}
}
}- 요청이 있을 때마다 프리랜더링
- getStaticProps보다 느림
Typescript
Javascript로 서버 코드를 유지 관리하기 위한 대안으로 Javascript에 타입을 부여한 언어
Typescript로 작성된 코드가 컴파일 과정을 거쳐 js가 되고 이를 브라우저가 해석한다. 즉, 개발 환경에서만 활성화된다.
Type = Properties + Methods
- Primitive Types: number, boolean, string, symbol, void, null, undefined
- Object Types: functions, arrays, classes, objects
- 타입스크립트 추가 제공 타입
Any : 잘 알지 못하는 타입을 표현해야할 때 (컴파일 검사 통과용)
let arr : any[] = ['hello',123,true]Union : 둘 이상의 데이터 유형을 모두 사용
let code: string|number
code = 123
code = 'abc'
code = false //ErrorTuple : 배열
var employee : [number,string] = [1,"John"]
var user : [number,string]
user = ['John',123] //ErrorEnum : 열거형
enum PrintMedia {
Newspaper, //0
Newsletter, //1
Magazine, //2
Book //3
}
let mediaType : number = PrintMedia.Book //3
let type : string = PrintMedia[2] //'Magazine'void : 타입이 없는 상태, 주로 리턴값이 없을 때
function sayHi():void{
console.log("Hi")
}Never : 절대 발생하지 않을 값, 함수의 리턴값을 내보내지 않을 때
Type Annotation VS Type Inference
Type Annotation : 개발자가 변수 선언시 타입을 직접 지정
Type Inference : 변수 선언과 동시에 초기화시 타입을 추론하여 자동 지정
Type Assertion : 타입스크립트가 추론한 데이터 타입을 개발자가 다시 지정하는 것
interface Foo {
bar : number;
bas : string;
}
var foo = {} as Foo;
foo.bar =123;
foo.bas ='Hi';Next.js 라우팅
파일 시스템 기반의 라우터. pages 디렉토리에 추가되는 파일을 페이지 경로로 사용할 수 있다.
pages/index.js -> '/'
pages/blog/index.js -> '/blog'
pages/blog/my-post.js -> '/blog/my-post'
pages/[username]/settings.js -> '/:username/settings' #Dynamic routingBlog App
Typescript 기반의 Next js로 마크다운 포스트를 생성하는 앱 (Nextjs 기본 예제)
Matter
마크다운 파일의 메타 데이터를 파싱
const fullPath = path.join(postsDirectory,`${id}.md`)
const fileContent = fs.readFileSync(fullPath,'utf-8')
//parse metadata with gray-matter
const matterRslt = matter(fileContent)Remark
마크다운 문서를 HTML로 변환
//convert markdown to HTML
const processedContent = await remark()
.use(remarkHtml)
.process(matterRslt.content)Github repo: https://github.com/R1NM/simple_nextjs_blog
