Next.js-빠른 가이드
Next.js는 서버 측 렌더링 기능이있는 React 기반 프레임 워크입니다. 매우 빠르고 SEO 친화적입니다.
Next.js를 사용하면 강력한 반응 기반 애플리케이션을 매우 쉽게 만들고 테스트 할 수 있습니다. 다음은 Next.js의 주요 기능입니다.
Hot Code Reload − Next.js 서버는 수정 된 파일을 감지하고 자동으로 다시로드합니다.
Automatic Routing− 라우팅을 위해 URL을 구성 할 필요가 없습니다. 파일은 페이지 폴더에 배치됩니다. 모든 URL은 파일 시스템에 매핑됩니다. 커스터마이징이 가능합니다.
Component specific styles − styled-jsx는 전역 및 구성 요소 특정 스타일에 대한 지원을 제공합니다.
Server side rendering − 반응 구성 요소는 서버에서 미리 렌더링되므로 클라이언트에서 더 빠르게로드됩니다.
Node Ecosystem − Next.js는 Node 생태계와 잘 반응하는 젤 기반입니다.
Automatic code split− Next.js는 필요한 라이브러리가있는 페이지를 렌더링합니다. Next.js는 하나의 큰 자바 스크립트 파일을 만드는 대신 여러 리소스를 만듭니다. 페이지가로드되면 필요한 자바 스크립트 페이지 만로드됩니다.
Prefetch − Next.js는 여러 컴포넌트를 연결하는 데 사용되는 Link 컴포넌트를 제공하며, 백그라운드에서 페이지 리소스를 프리 페치하는 프리 페치 속성을 지원합니다.
Dynamic Components − Next.js는 JavaScript 모듈과 React Components를 동적으로 가져올 수 있습니다.
Export Static Site − Next.js는 웹 애플리케이션에서 전체 정적 사이트를 내보낼 수 있습니다.
Built-in Typescript Support − Next.js는 Typescripts로 작성되었으며 우수한 Typescript 지원을 제공합니다.
Next.js는 React 기반 프레임 워크이므로 Node 환경을 사용하고 있습니다. 이제 확인하십시오Node.js 과 npm시스템에 설치됩니다. 다음 명령을 사용하여 Next.js를 설치할 수 있습니다.
npm install next react react-dom
Next.js가 성공적으로 설치되면 다음 출력을 관찰 할 수 있습니다.
+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s
이제 package.json 노드를 생성 해 보겠습니다.
npm init
package.json을 생성하는 동안 기본값 선택-
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
"name": "nextjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"next": "^9.4.4",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
이제 package.json의 스크립트 섹션을 업데이트하여 Next.js 명령을 포함합니다.
{
"name": "nextjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"next": "^9.4.4",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start"
},
"author": "",
"license": "ISC"
}
페이지 디렉토리를 만듭니다.
nextjs 폴더 내에 pages 폴더를 만들고 다음 내용으로 index.js 파일을 만듭니다.
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
Next.js에서는 파일 시스템 라우팅 기능을 사용하여 페이지를 만들고 페이지 사이를 이동할 수 있습니다. 우리는 사용할 것입니다Link 페이지 간 클라이언트 측 탐색을 갖도록 구성 요소.
Next.js에서 페이지는 React Component이며 pages 디렉토리에서 내 보냅니다. 각 페이지는 파일 이름에 따라 경로와 연결됩니다. 예를 들면
pages/index.js '/'경로와 연결됩니다.
pages/posts/first.js '/ posts / first'경로와 연결됩니다.
환경 설정 장 에서 만든 nextjs 프로젝트를 업데이트 해 보겠습니다 .
다음 내용으로 post 디렉토리와 first.js를 그 안에 만듭니다.
export default function FirstPost() {
return <h1>My First Post</h1>
}
홈 페이지로 돌아가려면 링크 지원을 추가하십시오. 다음과 같이 first.js 업데이트-
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</>
)
}
첫 페이지로 이동하려면 홈 페이지에 링크 지원을 추가하십시오. 다음과 같이 index.js 업데이트-
import Link from 'next/link'
function HomePage() {
return (
<>
<div>Welcome to Next.js!</div>
<Link href="/posts/first"><a>First Post</a></Link>
</>
)
}
export default HomePage
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
첫 번째 링크를 클릭하면 다음 출력이 표시됩니다.
Next.js에서는 이미지와 같은 정적 페이지를 매우 쉽게 제공 할 수 있습니다. public, 최상위 디렉토리. 이러한 파일을 다음 페이지와 유사한 방식으로 참조 할 수 있습니다.pages 예배 규칙서.
Next.js에서 페이지는 React Component이며 pages 디렉토리에서 내 보냅니다. 각 페이지는 파일 이름에 따라 경로와 연결됩니다.
Pages 장 에서 사용되는 nextjs 프로젝트를 업데이트 해 보겠습니다 .
공용 디렉토리를 만들고 그 안에 이미지를 배치합니다. logo.png, TutorialsPoint 로고 이미지를 가져 왔습니다.
다음과 같이 first.js 업데이트-
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
<br/">
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
여기에 index.js 파일에 logo.png에 대한 참조가 추가되었습니다.
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
공용 디렉토리는 SEO 목적의 경우에도 유용합니다. robot.txt, Google 사이트 확인 또는 웹 애플리케이션의 기타 정적 자산에 사용할 수 있습니다.
Next.js에서는 다음의 도움으로 각 반응 페이지의 헤드 섹션을 매우 쉽게 수정할 수 있습니다. <Head> 내장 된 반응 구성 요소.
Pages 장 에서 사용되는 nextjs 프로젝트를 업데이트 해 보겠습니다 .
다음과 같이 index.js 업데이트-
import Link from 'next/link'
import Head from 'next/head'
function HomePage() {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<Link href="/posts/first"><a>First Post</a></Link>
<br/>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export default HomePage
다음과 같이 first.js 업데이트-
import Link from 'next/link'
import Head from 'next/head'
export default function FirstPost() {
return (
<>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</>
)
}
여기에 index.js 파일에 logo.png에 대한 참조가 추가되었습니다.
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
첫 페이지 링크를 클릭하고 첫 번째 게시물 페이지에서도 변경된 제목을 확인합니다.
Next.js에서는 styled-jsx라는 이름의 inbuild css-in-js 라이브러리를 사용할 수 있습니다. 반응 구성 요소 내에서 CSS를 작성할 수 있으며 이러한 스타일은 구성 요소로 범위가 지정됩니다.
이 예에서는 다른 구성 요소를 포함하여 스타일을 지정하는 데 사용할 Container 객체를 만듭니다.
메타 데이터 장 에서 사용 된 nextjs 프로젝트를 업데이트 해 보겠습니다 .
먼저 루트 수준에서 Components 디렉토리를 만들고 다음과 같이 container.module.css 파일을 추가하십시오.
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
border: 1px solid red;
}
Components 디렉토리에 container.js 파일 만들기
import styles from './container.module.css'
function Container({ children }) {
return <div className={styles.container}>{children}</div>
}
export default Container
이제 first.js에서 컨테이너 구성 요소를 사용하십시오.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost() {
return (
<>
<Container>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</Container>
</>
)
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열고 첫 번째 게시물로 이동하면 다음과 같은 출력이 표시됩니다.
Next.js에서 모든 페이지에 적용될 글로벌 스타일을 만들어 보겠습니다.
이 예에서는 _app.js 구성 요소를 사용하는 모든 구성 요소에서 사용할 styles.css를 만듭니다.
CSS Support 장 에서 사용 된 nextjs 프로젝트를 업데이트 해 보겠습니다 .
먼저 루트 수준에서 스타일 디렉토리를 만들고 다음과 같이 styles.css 파일을 추가하십시오.
html,
body {
padding: 0;
margin: 0;
line-height: 1.6;
font-size: 18px;
background-color: lime;
}
* {
box-sizing: border-box;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
display: block;
}
페이지 디렉토리에 _app.js 파일 만들기
import '../styles/styles.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
첫 번째 게시물 링크를 클릭합니다.
Next.js에서는 사전 렌더링이라는 페이지에 대한 HTML을 생성한다는 것을 알고 있습니다. Next.JS는 두 가지 유형의 사전 렌더링을 지원합니다.
Static Generation−이 방법은 빌드시 HTML 페이지를 생성합니다. 이 미리 렌더링 된 HTML은 각 요청에 대해 전송됩니다. 이 방법은 마케팅 웹 사이트, 블로그, 웹 사이트, 도움말, 문서 웹 사이트를 나열하는 전자 상거래 제품에 유용합니다.
Server Side Generation−이 방법은 각 요청에 대해 HTML 페이지를 생성합니다. 이 방법은 html 페이지 내용이 각 요청에 따라 다를 수있는 경우에 적합합니다.
페이지 별 사전 렌더링
Next.JS는 대부분의 페이지가 정적 생성을 따르고 다른 페이지가 서버 측 렌더링을 사용하는 각 페이지에 대해 사전 렌더링 방법을 설정할 수 있습니다.
데이터없는 정적 생성
정적 생성은 데이터없이 수행 할 수 있습니다.이 경우 HTML 페이지는 데이터를 프리 페치 한 다음 렌더링을 시작할 필요없이 준비됩니다. 데이터는 나중에 또는 요청시 가져올 수 있습니다. 이 기술은 데이터가 오는 데 시간이 걸리는 경우 데이터없이 사용자 인터페이스를 사용자에게 표시하는 데 도움이됩니다.
데이터를 사용한 정적 생성
정적 생성은 데이터로 수행 할 수 있습니다.이 경우 HTML은 데이터에 종속 될 수 있으므로 데이터를 가져올 때까지 HTML 페이지가 준비되지 않습니다. 각 구성 요소에는 특별한 방법이 있습니다.getStaticProps 데이터를 가져오고 페이지의 소품으로 데이터를 전달하는 데 사용할 수 있으므로 페이지가 전달 된 소품에 따라 렌더링 할 수 있습니다.
getStaticProps () 함수는 프로덕션에서 빌드시 실행되며 개발 모드의 모든 요청에 대해 실행됩니다.
같은 것을 보여주는 예제를 만들어 봅시다.
이 예에서는 데이터를 가져 오기 위해 서버 히트를 만들기 위해 업데이트 index.js 및 first.js 페이지를 생성합니다.
Global CSS Support 장 에서 사용 된 nextjs 프로젝트를 업데이트하겠습니다 .
페이지 디렉토리의 index.js 파일을 업데이트하여 getServerSideProps () 메소드를 사용하십시오. 이 메서드는 요청마다 호출됩니다.
import Link from 'next/link'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<Link href="/posts/first"><a>First Post</a></Link>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePage
페이지 디렉토리의 first.js 파일을 업데이트하여 getStaticProps () 메소드를 사용하십시오. 이 메서드는 한 번 호출됩니다.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost(props) {
return (
<>
<Container>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
<div>Next stars: {props.stars}</div>
</h2>
</Container>
</>
)
}
export async function getStaticProps() {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
첫 번째 게시물 링크를 클릭합니다.
Next.js는 파일 시스템 기반 라우터를 사용합니다. 페이지를 추가 할 때마다pagesurl을 통해 자동으로 사용할 수 있습니다. 다음은이 라우터의 규칙입니다.
Index Routes− 폴더에있는 index.js 파일은 디렉토리의 루트에 매핑됩니다. 예를 들면-
pages / index.js는 '/'에 매핑됩니다.
pages / posts / index.js는 '/ posts'에 매핑됩니다.
Nested Routes− 라우터 URL이 자동으로 지정되므로 페이지 디렉토리의 모든 중첩 폴더 구조. 예를 들면-
pages / settings / dashboard / about.js는 '/ settings / dashboard / about'에 매핑됩니다.
pages / posts / first.js는 '/ posts / first'에 매핑됩니다.
Dynamic Routes− URL을 일치시키기 위해 명명 된 매개 변수도 사용할 수 있습니다. 동일한 경우 대괄호를 사용하십시오. 예를 들면-
pages / posts / [id] .js는 '/ posts / : id'에 매핑되며 '/ posts / 1'과 같은 URL을 사용할 수 있습니다.
pages / [user] /settings.js는 '/ abc / settings'와 같은 URL을 사용할 수있는 '/ posts / : user / settings'에 매핑됩니다.
pages / posts / [... all] .js는 '/ posts / *'에 매핑되며 '/ posts / 2020 / jun /'과 같은 URL을 사용할 수 있습니다.
페이지 연결
Next.JS는 링크 반응 구성 요소를 사용하여 클라이언트 측의 페이지를 연결할 수 있습니다. 그것은 다음과 같은 속성을 가지고 있습니다-
href− 페이지 디렉토리의 페이지 이름. 예를 들면/posts/first pages / posts 디렉토리에있는 first.js를 참조합니다.
같은 것을 보여주는 예제를 만들어 봅시다.
이 예에서는 index.js 및 first.js 페이지를 업데이트하여 데이터를 가져 오기 위해 서버 히트를 만들 것입니다.
Global CSS Support 장 에서 사용 된 nextjs 프로젝트를 업데이트하겠습니다 .
다음과 같이 pages 디렉토리의 index.js 파일을 업데이트합니다.
import Link from 'next/link'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<Link href="/posts/first">> <a>First Post</a></Link>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePage
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
첫 번째 게시물 링크를 클릭합니다.
Next.js에서는 동적으로 경로를 만들 수 있습니다. 이 예에서는 즉시 페이지와 해당 라우팅을 만듭니다.
Step 1. Define [id].js file− [id] .js는 id가 상대 경로가 될 동적 페이지를 나타냅니다. 이 파일을 pages / post 디렉토리에 정의하십시오.
Step 2. Define lib/posts.js− posts.js는 ID와 내용을 나타냅니다. lib 디렉토리는 루트 디렉토리에 생성됩니다.
[id] .js
경로를 설정하는 getStaticPaths () 메서드와 id를 기반으로 콘텐츠를 가져 오기 위해 getStaticProps () 메서드를 사용하여 [id] .js 파일을 업데이트합니다.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
import { getAllPostIds, getPostData } from '../../lib/posts'
export default function Post({ postData }) {
return (
<Container>
{postData.id}
<br />
{postData.title}
<br />
{postData.date}
</Container>
)
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
const postData = getPostData(params.id)
return {
props: {
postData
}
}
}
posts.js
posts.js에는 ID를 가져 오는 getAllPostIds ()와 해당 내용을 가져 오는 getPostData ()가 포함되어 있습니다.
export function getPostData(id) {
const postOne = {
title: 'One',
id: 1,
date: '7/12/2020'
}
const postTwo = {
title: 'Two',
id: 2,
date: '7/12/2020'
}
if(id == 'one'){
return postOne;
}else if(id == 'two'){
return postTwo;
}
}
export function getAllPostIds() {
return [{
params: {
id: 'one'
}
},
{
params: {
id: 'two'
}
}
];
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000 / posts / one을 열면 다음 출력이 표시됩니다.
브라우저에서 localhost : 3000 / posts / two를 열면 다음 출력이 표시됩니다.
Next.js에서 지금까지 Link react 컴포넌트를 사용하여 한 페이지에서 다른 페이지로 이동했습니다. 라우터 구성 요소를 사용하여 동일한 결과를 얻을 수있는 프로그래밍 방식도 있습니다. 일반적으로 라우터 구성 요소는 html 태그와 함께 사용됩니다.
다음과 같이 pages 디렉토리의 index.js 파일을 업데이트합니다.
import Router from 'next/router'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<span onClick={() => Router.push('/posts/one')}>First Post</span>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePage
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
링크는 아니지만 클릭 가능한 첫 번째 게시물을 클릭합니다.
Next.js에서 얕은 라우팅은 동일한 페이지로 이동하지만 getServerSideProps, getStaticProps 및 getInitialProps 메소드에 대한 호출이 없음을 의미합니다.
얕은 라우팅을 수행하기 위해 얕은 플래그를 true로 사용하는 라우터를 사용합니다. 아래 예를 참조하십시오.
다음과 같이 pages 디렉토리의 index.js 파일을 업데이트합니다.
import Router from 'next/router'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePage
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000을 열고 Reload 링크를 클릭하면 다음 출력이 표시됩니다.
API Routes는 Next.js를 사용하여 나머지 API를 만드는 방법입니다. Next.js는/pages/api폴더이며 API 끝점으로 처리됩니다. API 기능의 예-
export default (req, res) => {
...
}
다음은 고려해야 할 몇 가지 중요한 사항입니다.
req − req는 http.IncomingMessage의 인스턴스이며 요청에서 데이터를 가져 오는 데 사용됩니다.
res − res는 http.ServerResponse의 인스턴스이며 응답으로 데이터를 보내는 데 사용됩니다.
같은 것을 보여주는 예제를 만들어 봅시다.
이 예에서는 다음 위치에 user.js를 만들 것입니다. pages/api 예배 규칙서.
Global CSS Support 장 에서 사용 된 nextjs 프로젝트를 업데이트하겠습니다 .
다음과 같이 pages / api 디렉토리에 user.js 파일을 생성합니다.
export default (req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify({ name: 'Robert' }))
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev D:\Node\nextjs
> next
ready - started server on http://localhost:3000
info - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000 / api / user를 열면 다음 출력이 표시됩니다.
{"name":"Robert"}
Next.JS의 API 경로에는 들어오는 요청을 구문 분석하는 데 도움이되는 내장 미들웨어가 있습니다.
다음은 미들웨어입니다.
req.cookies− 쿠키 객체는 요청에 의해 전송 된 쿠키를 포함합니다. 기본값은 {}입니다.
req.query− 쿼리 객체는 쿼리 문자열을 포함합니다. 기본값은 {}입니다.
req.body− 쿼리 개체는 'content-type'을 사용하여 구문 분석 된 요청 본문을 포함합니다. 기본값은 null입니다.
같은 것을 보여주는 예제를 만들어 봅시다.
이 예에서는 user.js를 pages/api 예배 규칙서.
API Routes 장 에서 사용 된 nextjs 프로젝트를 업데이트 해 보겠습니다 .
다음과 같이 pages / api 디렉토리에 user.js 파일을 생성합니다.
export default (req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify({ query: req.query }))
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev D:\Node\nextjs
> next
ready - started server on http://localhost:3000
info - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 http : // localhost : 3000 / api / user? counter = 1을 열면 다음 출력이 표시됩니다.
{"query":{"counter":"1"}}
res 객체는 서비스를 생성하기위한 개발을 쉽게하기 위해 helper 메소드와 같은 express.js를 가지고 있습니다.
다음은 응답 도우미 메서드입니다.
res.status(code)−이 방법은 응답 상태를 설정합니다. 전달 된 코드는 유효한 HTTP 상태 여야합니다.
req.json(json)−이 메서드는 JSON 응답을 반환합니다. 전달 된 json은 유효한 JSON 객체 여야합니다.
req.send(body)−이 메서드는 HTTP 응답을 보냅니다. 응답은 문자열, 객체 또는 버퍼 일 수 있습니다.
같은 것을 보여주는 예제를 만들어 봅시다.
이 예에서는 user.js를 pages/api 예배 규칙서.
API Routes 장 에서 사용 된 nextjs 프로젝트를 업데이트 해 보겠습니다 .
다음과 같이 pages / api 디렉토리에 user.js 파일을 생성합니다.
export default (req, res) => {
res.status(200).json({ name: 'Robert' });
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev D:\Node\nextjs
> next
ready - started server on http://localhost:3000
info - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 http : // localhost : 3000 / api / user를 열면 다음 출력이 표시됩니다.
{ name: 'Robert' }
Next.js는 typescript에 대한 탁월한 지원을 제공합니다. 다음은 프로젝트에서 typescript를 활성화하는 몇 가지 단계입니다.
tsconfig.json 만들기
루트 디렉터리에 tsconfig.json을 만듭니다. 처음에는 비워두고 있습니다. 이제 서버를 시작하십시오.
Next.JS는 tsconfig.json을 감지하고 콘솔에 다음 메시지를 표시합니다.
npm run dev
> [email protected] dev D:\Node\nextjs
> next
ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Please install typescript, @types/react, and @types/node by running:
npm install --save-dev typescript @types/react @types/node
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...
typescript 설치
npm install 명령을 실행하여 typescript 및 관련 라이브러리를 설치합니다.
npm install --save-dev typescript @types/react @types/node
...
+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev D:\Node\nextjs
> next
ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
event - compiled successfully
wait - compiling...
event - compiled successfully
tsconfig.json을 엽니 다.
NextJS 서버가 tsconfig.json을 수정했습니다.
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}
hello.ts 만들기
페이지 / api 디렉토리에 hello.ts를 만들어 나머지 서비스 역할을합니다.
import { NextApiRequest, NextApiResponse } from 'next'
export default (_: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000 / api / hello를 열면 다음 출력이 표시됩니다.
{"text":"Welcome to TutorialsPoint"}
Next.js는 서버, 데이터베이스 등에 연결할 때 사용할 수있는 노드에 환경 변수를 게시하는 기능을 지원합니다.이를 위해 루트 디렉토리에 .env.local 파일을 생성해야합니다. .env.production도 만들 수 있습니다.
.env.local 만들기
다음 내용으로 루트 디렉터리에 .env.local을 만듭니다.
DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs
env.js 만들기
process.env를 사용하여 환경 변수를 사용할 pages / posts 디렉토리에 다음 내용으로 env.js라는 페이지를 만듭니다.
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost(props) {
return (
<>
<Container>
<Head>
<title>Environment Variables</title>
</Head>
<h1>Database Credentials</h1>
<p>Host: {props.host}</p>
<p>Username: {props.username}</p>
<p>Password: {props.password}</p>
</Container>
</>
)
}
export async function getStaticProps() {
// Connect to Database using DB properties
return {
props: {
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
}
}
}
이제 서버를 시작하십시오.
Next.JS는 .env.local을 감지하고 콘솔에 다음 메시지를 표시합니다.
npm run dev
> [email protected] dev D:\Node\nextjs
> next
ready - started server on http://localhost:3000
info - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait - compiling...
event - compiled successfully
event - build page: /posts/env
wait - compiling...
event - compiled successfully
출력 확인
브라우저에서 localhost : 3000 / posts / env를 열면 다음 출력이 표시됩니다.
지금까지 개발 모드에서 샘플 NEXT.JS 애플리케이션을 개발하고 실행했습니다. 이제 다음 단계를 사용하여 로컬에서 프로덕션 준비 배포를 수행합니다.
npm run build − 생산 준비가 된 고도로 최적화 된 빌드를 빌드하십시오.
npm run start − 서버를 시작합니다.
프로덕션 준비 빌드에는 주로 디버깅에 사용되는 개발 모드에 비해 소스 맵 및 핫 코드 재로드가 없습니다.
빌드 준비
다음 명령을 실행하여 프로덕션 준비 빌드를 준비하십시오.
npm run build
> [email protected] build \Node\nextjs
> next build
info - Loaded env from \Node\nextjs\.env.local
Creating an optimized production build
Compiled successfully.
Automatically optimizing pages
Page Size First Load JS
+ ? / 2.25 kB 60.3 kB
+ /_app 288 B 58.1 kB
+ /404 3.25 kB 61.3 kB
+ ? /api/user
+ ? /posts/[id] 312 B 61.6 kB
+ + /posts/one
+ + /posts/two
+ ? /posts/env 2.71 kB 60.8 kB
+ ? /posts/first 374 B 61.7 kB
+ First Load JS shared by all 58.1 kB
+ static/pages/_app.js 288 B
+ chunks/3458401054237127135bcd3ee8eb2a19d67af299.a1a019.js 10.5 kB
+ chunks/framework.c6faae.js 40 kB
+ runtime/main.60464f.js 6.54 kB
+ runtime/webpack.c21266.js 746 B
+ css/9706b5b8ed8e82c0fba0.css 175 B
? (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
(Static) automatically rendered as static HTML (uses no initial props)
? (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
서버 시작
다음 명령을 실행하여 프로덕션 서버를 시작하십시오-.
npm run start
> [email protected] start \Node\nextjs
> next start
info - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000
출력 확인
브라우저에서 localhost : 3000 / api / user를 열면 다음 출력이 표시됩니다.
{"name":"Robert"}
NEXT.JS는 애플리케이션을 시작, 빌드 및 내보낼 수있는 CLI를 제공합니다. npm 5.2 이후에 제공되는 npx를 사용하여 호출 할 수 있습니다.
CLI 도움말
CLI 명령 목록과 도움말을 보려면 다음 명령을 입력하십시오.
npx next -h
Usage
$ next <command>
Available commands
build, start, export, dev, telemetry
Options
--version, -v Version number
--help, -h Displays this message
For more information run a command with the --help flag
$ next build --help
프로덕션 준비 빌드 빌드
다음 명령을 입력하십시오.
npx next build
info - Loaded env from D:\Node\nextjs\.env.local
Creating an optimized production build
Compiled successfully.
Automatically optimizing pages
Page Size First Load JS
+ ? / 2.25 kB 60.3 kB
+ /_app 288 B 58.1 kB
+ /404 3.25 kB 61.3 kB
+ ? /api/user
+ ? /posts/[id] 312 B 61.6 kB
+ + /posts/one
+ + /posts/two
+ ? /posts/env 2.71 kB 60.8 kB
+ ? /posts/first 374 B 61.7 kB
+ First Load JS shared by all 58.1 kB
+ static/pages/_app.js 288 B
+ chunks/ab55cb957ceed242a750c37a082143fb9d2f0cdf.a1a019.js 10.5 kB
+ chunks/framework.c6faae.js 40 kB
+ runtime/main.60464f.js 6.54 kB
+ runtime/webpack.c21266.js 746 B
+ css/9706b5b8ed8e82c0fba0.css 175 B
? (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
(Static) automatically rendered as static HTML (uses no initial props)
? (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
개발 서버 구축 및 시작
다음 명령을 입력하십시오.
npx next dev
ready - started server on http://localhost:3000
info - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
프로덕션 서버 시작
다음 명령을 입력하십시오.
npx next start
info - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000