設定

npx create-next-app [app-name]
# or
yarn create next-app [app-name]

typescriptの追加

npx create-next-app --typescript
# or
yarn create next-app --typescript

next jsを私のプロジェクトに追加

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

package.スクリプトをjsonに追加

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

ページディレクトリを作成し、内部にファイルを作成する場合、デフォルトではそのファイルの名前でルーティングされます.
例:
/pages/index.jsファイル
「/」はルーティングパスとして有効です.
/pages/first.ファイル.
「/first」はルーティングパスです.

どうてきルーティング

fileを「[value].js」に生成します.

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { value } = router.query

  return <p>Post: {value}</p>
}

export default Post

/posts/abcのpathを入力します.
tagのテキストはPost:abcです.
/posts/abc?query=efg
入力
router.queryの値は次のとおりです.

{query:"efg",value:"abc"}

に出力します.
次はnextで使用するリンクの例です.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">
          <a>Go to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">
          <a>Also goes to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc/a-comment">
          <a>Go to pages/post/[pid]/[comment].js</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

react-router-domで使用するリンクとは少し違います.
toの代わりにhrefを使用します.
catch all routes
/posts/abc/qwer?foo=bar
このような形で、より多くのルーティングデップを受け入れる必要がある場合、どうなるのでしょうか.
posts/abc/qwer?foo=bar
このようなurlがある場合:
[value].jsの場合404エラーが発生します.
ファイルの名前をspreadに変更

[...value].js

urlを認識するとvalueは配列に変更され、以下に示す.

李ギョンウ/postsまで入力したurlだけは認識できない.
オプションcatch all routionsの使用

[[...value]].js

ファイル名を上記のフォーマットに変更し、/postsにアクセスしてみます.
このコンポーネントは正常に出力されますが、コンソールまたはp tagのクエリーに出力しようとしません.
これらの方法を用いて動的ルーティングを実現すればよい.
もしかするとpages/posts/でcreateするかもしれません.jsというファイルが既に存在する場合
動的ルーティングの場合、createはcreateです.jsと自動コーディネート.
動的ルーティングによるファイルのルーティングの重複を防止します.
ほとんどの処理はLinkで行えますが、ルーティングは手動で変更できます.

import { useRouter } from 'next/router'

function ReadMore() {
  const router = useRouter()

  return (
    <span onClick={() => router.push('/about')}>Click here to read more</span>
  )
}

export default ReadMore

上記のルータです.push()を使用します.

Shallow Routing(浅い)

浅いルーティングはページを置き換えず、パスのみを変更します.
同じページ以外にジャンプすると、浅いルーティングは行われません.

    router.push('/?counter=10', undefined, { shallow: true })

Pages

Pre-rendering

next jsはデフォルトですべてのページをプリプレゼンテーションします.
2つの形式のプリプレゼンテーションがあり、それぞれの形式の違いはページにHTMLを生成するときに現れます.

静的生成:構築時にHTMLを生成し、各リクエストで繰り返し使用します.

サーバ側プレゼンテーション:リクエストごとにHTMLが生成されます.

nextjsはこの2つの形状を選択できます.
ほとんどのページは静的生成を使用しますが、ユーザーが変更を要求したページは通常、サーバ側レンダリングを使用します.

データを使用した静的作成

一部のページでは、事前レンダリングのために外部データをインポートする必要があります.2つのシナリオがあり、1つまたは2つが適用されます.いずれの場合もnextjsは次の機能を提供します.

ページの内容は外部データにより異なります
:getStaticProps

を使用

ページのパスは外部データによって異なります
:getStaticPath+getStaticProps

を使用

シーン1:ページの内容が外部データに依存している場合

例:ブログページでは、CMSからブログ投稿のリストを取得する必要があります.

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export default Blog

nextjsは、レンダリング前にデータをインポートするために同じファイルからエクスポートされたasync関数です.
getStaticPropsを許可します.
この関数は、構築時に呼び出され、プリレンダリング時にインポートしたデータをpropsとしてページに渡します.

function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

シーン2:ページパスは外部データによって異なります

nextjsでは、ダイナミックパスを持つページを作成できます.
データもダイナミックパスに基づいて動的に変更されます.

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

作成中...