[Next.js] next.js 알아보기

Next.js란?

https://nextjs.org/

Next.js by Vercel - The React Framework

Vercel에서 만든 React의 SSR(서버 사이드 렌더링) 프레임 워크입니다. 개발자가 서버사이드 렌더링에 대한 고려를 직접 하지 않아도 된다는 장점을 가지고 있습니다. 그리고 정적 사이트를 만들 수 있습니다. 특별한 설정 없이 쉽게 사용할 수 있기에 많은 개발자들이 선호하는 프레임워크입니다. 파일 시트템 라우팅을 사용하므로 파일 경로가 라우팅이 되기에 직관적으로 라우팅을 설정할 수 있습니다. 

---

시작하기(Manual Setup)

npm init -y
npm i next react react-dom

//package.json
"scripts": {
	"dev":  "next dev",
    "build": "next build",
    "start": "next start"
},

pages 폴더를 생성하고, npm run dev 명령어를 치면 실행이 됩니다. 

---

시작하기(create-next-app)

npx create-next-app project-name

yarn create next-app

yarn run dev 

npm run dev 를 하면 실행이 됩니다. 

public폴더는 내부 파일이 루트/이름으로 나오게 됩니다. 

 

---

라우팅 설정

• pages/index.js 의 컴포넌트는 / 경로에 렌더링 됩니다.
• pages/blog/index.js 는 /blog 경로에 렌더링 됩니다. 
• pages/blog/post.js 는 /blog/post에서 접속할 수 있습니다. 
• pages/dashboard/settings/username.js 는 /dashboard/settings/username 에서 볼 수 있습니다. 

• pages/blog/[ex].js => /blog:ex  
• 동적과 정적 라우팅이 함께 있을 때는 정적 라우팅이 우선됩니다. 

 

• pages/[username]/settings.js => /:username/settings

• pages/data/[...all].js => /data/*    (해당 상위 폴더 밑으로 들어오는 라우팅은 index.js를 제외하고 모두 [...all].js가 받게 됩니다. 

---

경로에서 정보 가져오기

userRouter를 통해 url정보를 가져와 사용할 수 있습니다.