Next.js-クイックガイド
Next.jsは、サーバー側のレンダリング機能を備えたReactベースのフレームワークです。それは非常に高速でSEOに優しいです。
Next.jsを使用すると、堅牢なReactベースのアプリケーションを非常に簡単に作成してテストできます。Next.jsの主な機能は次のとおりです。
Hot Code Reload − Next.jsサーバーは変更されたファイルを検出し、それらを自動的に再読み込みします。
Automatic Routing−ルーティング用のURLを構成する必要はありません。ファイルはpagesフォルダに配置されます。すべてのURLはファイルシステムにマップされます。カスタマイズが可能です。
Component specific styles − styled-jsxは、グローバルスタイルとコンポーネント固有のスタイルをサポートします。
Server side rendering −反応コンポーネントはサーバー上で事前にレンダリングされるため、クライアントでの読み込みが速くなります。
Node Ecosystem −反応ベースのNext.jsは、Nodeエコシステムとうまく調和します。
Automatic code split− Next.jsは、必要なライブラリを含むページをレンダリングします。Next.jsは、単一の大きなjavascriptファイルを作成する代わりに、複数のリソースを作成します。ページが読み込まれると、必要なjavascriptページのみが読み込まれます。
Prefetch − Next.jsは、複数のコンポーネントをリンクするために使用されるLinkコンポーネントを提供し、バックグラウンドでページリソースをプリフェッチするためのプリフェッチプロパティをサポートします。
Dynamic Components − Next.jsを使用すると、JavaScriptモジュールとReactコンポーネントを動的にインポートできます。
Export Static Site − Next.jsを使用すると、Webアプリケーションから完全な静的サイトをエクスポートできます。
Built-in Typescript Support − Next.jsはTypescriptsで記述されており、優れたTypescriptサポートを提供します。
Next.jsはReactベースのフレームワークであるため、Node環境を使用しています。今あなたが持っていることを確認してくださいNode.js そして npmシステムにインストールされています。次のコマンドを使用して、Next.jsをインストールできます-
npm install next react react-domNext.jsが正常にインストールされると、次の出力を確認できます-
+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989sそれでは、ノードpackage.json −を作成しましょう。
npm initpackage.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のscriptsセクションを更新して、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 HomePageNext.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コンポーネントであり、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 HomePageNext.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を開くと、次の出力が表示されます。
First Linkをクリックすると、次の出力が表示されます。
Next.jsでは、画像のような静的ページを配置することで非常に簡単に提供できます public、トップレベルのディレクトリ。これらのファイルは、のページと同様の方法で参照できます。pages ディレクトリ。
Next.jsでは、ページはReactコンポーネントであり、pagesディレクトリからエクスポートされます。各ページは、ファイル名に基づいてルートに関連付けられています。
Pagesの章で使用されているnextjsプロジェクトを更新しましょう。
パブリックディレクトリを作成し、その中に画像を配置します。ロゴ.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サイトの検証、またはWebアプリケーション内のその他の静的アセットに使用できます。
Next.jsでは、各反応ページのヘッドセクションを非常に簡単に変更できます。 <Head> 内蔵のreactコンポーネント。
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 HomePagefirst.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という名前のinbuildcss-in-jsライブラリを使用できます。これにより、reactコンポーネント内に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でContainerコンポーネントを使用します。
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サポートの章で使用されているnextjsプロジェクトを更新しましょう。
まず、ルートレベルでstylesディレクトリを作成し、次のようにファイル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;
}pagesディレクトリに_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は、2種類の事前レンダリングをサポートしています。
Static Generation−このメソッドは、ビルド時にHTMLページを生成します。この事前にレンダリングされたHTMLは、リクエストごとに送信されます。この方法は、マーケティングWebサイト、ブログ、Webサイト、ヘルプ、ドキュメントWebサイトを一覧表示するeコマース製品に役立ちます。
Server Side Generation−このメソッドは、リクエストごとにHTMLページを生成します。この方法は、HTMLページのコンテンツがリクエストごとに異なる可能性がある場合に適しています。
ページごとの事前レンダリング
Next.JSを使用すると、ほとんどのページが静的生成に従い、他のページがサーバー側のレンダリングを使用する各ページの事前レンダリング方法を設定できます。
データなしの静的生成
静的生成はデータなしで実行できます。その場合、HTMLページは、データをプリフェッチしてからレンダリングを開始する必要なしに準備が整います。データは後で、または要求に応じてフェッチできます。この手法は、データの取得に時間がかかる場合に備えて、データなしでユーザーインターフェイスをユーザーに表示するのに役立ちます。
データを使用した静的生成
静的生成はデータを使用して実行できます。その場合、HTMLはデータに依存している可能性があるため、データがフェッチされるまでHTMLページの準備はできません。各コンポーネントには特別なメソッドがありますgetStaticProps これを使用して、データをフェッチし、ページの小道具としてデータを渡すことができるため、渡された小道具に従ってページをレンダリングできます。
getStaticProps（）関数は、本番環境ではビルド時に実行され、開発モードではすべてのリクエストに対して実行されます。
同じことを示す例を作成しましょう。
この例では、更新index.jsページとfirst.jsページを作成して、サーバーにヒットさせてデータを取得します。
グローバルCSSサポートの章で使用されているnextjsプロジェクトを更新しましょう。
getServerSideProps（）メソッドを使用するように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 HomePagegetStaticProps（）メソッドを使用するようにpagesディレクトリのfirst.jsファイルを更新します。このメソッドは1回呼び出されます。
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は、ファイルシステムベースのルーターを使用します。ページを追加するときはいつでもpagesディレクトリ、それはURLを介して自動的に利用可能です。このルーターのルールは次のとおりです。
Index Routes−フォルダに存在するindex.jsファイルは、ディレクトリのルートにマップされます。例-
pages /index.jsは「/」にマップされます。
pages / posts /index.jsは「/ posts」にマップされます。
Nested Routes−ルーターのURLが自動的に設定されるため、pagesディレクトリ内のネストされたフォルダ構造。例-
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は「/ posts /：user / settings」にマップされ、「/ abc / settings」のようなURLを使用できます。
pages / posts / [... all] .jsは「/ posts / *」にマップされ、「/ posts / 2020 / jun /」のような任意のURLを使用できます。
ページリンク
Next.JSでは、Linkreactコンポーネントを使用してクライアント側のページをリンクできます。以下の特性があります-
href−ページディレクトリ内のページの名前。例えば/posts/first これは、pages / postsディレクトリにあるfirst.jsを指します。
同じことを示す例を作成しましょう。
この例では、index.jsページとfirst.jsページを更新して、サーバーにヒットしてデータを取得します。
グローバルCSSサポートの章で使用されている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 HomePageNext.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（）メソッドとgetStaticProps（）メソッドを使用して[id] .jsファイルを更新し、idに基づいてコンテンツを取得します。
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では、これまでのところ、Linkreactコンポーネントを使用して1つのページから別のページに移動しています。ルーターコンポーネントを使用して同じことを達成するためのプログラム的な方法もあります。通常、ルーターコンポーネントは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 HomePageNext.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 HomePageNext.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ルートは、Next.jsを使用してRESTAPIを作成する方法です。Next.jsは、に存在するすべてのファイルをマップします/pages/apiフォルダであり、APIエンドポイントとして扱われます。API関数の例-
export default (req, res) => {
...
}以下は考慮すべきいくつかの重要なポイントです。
req − reqはhttp.IncomingMessageのインスタンスであり、リクエストからデータを取得するために使用されます。
res − resはhttp.ServerResponseのインスタンスであり、応答としてデータを送信するために使用されます。
同じことを示す例を作成しましょう。
この例では、でuser.jsを作成します。 pages/api ディレクトリ。
グローバルCSSサポートの章で使用されている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− Cookiesオブジェクトには、リクエストによって送信されたCookieが含まれます。デフォルト値は{}です。
req.query−クエリオブジェクトにはクエリ文字列が含まれています。デフォルト値は{}です。
req.body−クエリオブジェクトには、「content-type」を使用して解析されたリクエスト本文が含まれています。デフォルト値はnullです。
同じことを示す例を作成しましょう。
この例では、user.jsを更新します。 pages/api ディレクトリ。
APIルートの章で使用されている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 オブジェクトには、サービスを作成するための開発を容易にするヘルパーメソッドのようなexpress.jsがあります。
以下は、応答ヘルパーメソッドです。
res.status(code)−このメソッドは、応答のステータスを設定します。渡されるコードは、有効なHTTPステータスである必要があります。
req.json(json)−このメソッドはJSON応答を返します。渡されるjsonは有効なJSONオブジェクトである必要があります。
req.send(body)−このメソッドはHTTP応答を送信します。応答は、文字列、オブジェクト、またはバッファにすることができます。
同じことを示す例を作成しましょう。
この例では、user.jsを更新します。 pages/api ディレクトリ。
APIルートの章で使用されている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を優れた方法でサポートしています。以下は、プロジェクトでタイプスクリプトを有効にするためのいくつかの手順です。
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 successfullytsconfig.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を作成します
pages / apiディレクトリにhello.tsを作成します。これは私たちのRESTサービスとして機能します。
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=nextjsenv.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を提供します。npm5.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