22.2.25 (금) +33days
Upgrade Guide
https://nextjs.org/docs/upgrading
12 버전까지...
12버전 오픈과 함께 Upgrade Guide를 제공한다.
Migrating to Next.js
Incrementally Adopting Next.js
https://nextjs.org/docs/migrating/incremental-adoption
Migrating from Gatsby
https://nextjs.org/docs/migrating/from-gatsby
Migrating from Create React App
https://nextjs.org/docs/migrating/from-create-react-app
Migrating from React Router
https://nextjs.org/docs/migrating/from-react-router
API Reference
Next.js CLI
https://nextjs.org/docs/api-reference/cli
npx next -h
Create Next App
https://nextjs.org/docs/api-reference/create-next-app
npx create-next-app@latest
# or
yarn create next-app
You can create a TypeScript project with the --ts, --typescript flag:
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
next/router
https://nextjs.org/docs/api-reference/next/router
useRouter
If you want to access the [router object](https://nextjs.org/docs/api-reference/next/router#router-object) inside any function component in your app, you can use the useRouter hook, take a look at the following example:
import { useRouter } from 'next/router'
function ActiveLink({ children, href }) {
const router = useRouter()
const style = {
marginRight: 10,
color: router.asPath === href ? 'red' : 'black',
}
const handleClick = (e) => {
e.preventDefault()
router.push(href)
}
return (
<a href={href} onClick={handleClick} style={style}>
{children}
</a>
)
}
export default ActiveLink
next/link
https://nextjs.org/docs/api-reference/next/link
Client-side transitions between routes can be enabled via the Link component exported by next/link.
For an example, consider a pages directory with the following files:
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
<li>
<Link href="/blog/hello-world">
<a>Blog Post</a>
</Link>
</li>
</ul>
)
}
export default Home
next/image
https://nextjs.org/docs/api-reference/next/image
next/script
https://nextjs.org/docs/api-reference/next/script
next/head
https://nextjs.org/docs/api-reference/next/head
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage
next/amp
https://nextjs.org/docs/api-reference/next/amp
next/server
https://nextjs.org/docs/api-reference/next/server
Edge Runtime
https://nextjs.org/docs/api-reference/edge-runtime
Data Fetching
getInitialProps
getServerSideProps
getStaticPaths
getStaticProps
Static Optimization Indicator
https://nextjs.org/docs/api-reference/next.config.js/static-optimization-indicator
⚙️ next.config.js
https://nextjs.org/docs/api-reference/next.config.js/introduction
For custom advanced configuration of Next.js, you can createa next.config.js or next.config.mjs file in the root of your project directory (next to package.json).
next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.
정리
Upgrade Guide ⇒ 최신 12버전까지
Cli / CNA ⇒ Next.js 다루는 간편 도구
기타 ⇒ Router / Link / Image / Head / Server
next.config.js ⇒ Next.js 프로젝트 구성 커스텀
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
댓글