TIL 01.31

Next.js

Manual Setup

Install next, react and react-dom in your project:

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

Open package.json and add the following scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

These scripts refer to the different stages of developing an application:

• dev - Runs next dev to start Next.js in development mode
• build - Runs next build to build the application for production usage
• start - Runs next start to start a Next.js production server
• lint - Runs next lint to set up Next.js' built-in ESLint configuration

 

Page

• Next.js에서의 페이지란?

  // pages/about.js (1)
  export default function About() {
  	return <div>About Page</div>
  }
  
  // pages/about/index.js (2)
  export default function About() {
  	return <div>About Page</div>
  }
  
  // pages/index.js (3)
  export default function Index() {
  	return <div>Index Page</div>
  }
  

  1, 2 두 가지 방법 모두 파일 기반 라우팅을 이용하여 페이지를 만들 수 있습니다.
• pages 폴더 안에 있는 react component를 의미합니다.

페이지 이동

• next/link

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}

export default Home