次のルーティング.js

3021 ワード
next テキストリンク
こんにちは!今日は、次の使用時にルーティングを実装するためのオプションについて説明します.jsうまくいけば、あなたがこれを読んでいるならば、あなたは反応でルーティングを実装する方法についての理解を持っています.次から.JSは、結局、反応フレームワークです.次.JSは、動的ルーティングのためだけでなく静的なルートを作成するための非常に簡単なアプローチを持っています.これは、すべての我々の次のアプリでは、私たちのページのファイルによって処理されるPages ディレクトリ.しかし、Webアプリケーションが複雑になるにつれて、このようにルートを定義するのは、より理想的になりません.あなたは、ポストの成長しているコレクションで一つのポストを表示する方法を提供する必要があるブログを書くかもしれません.次.JSは私たちに一致することによってこれらのポストのいずれかをプルアップする方法を追加することができます[param] ファイルパスに含めることができます.blog/[slug] , posts/[pid] comments/[id] ). 次を使う.JSLink コンポーネントは、クライアント側でレンダリングするには、サーバー内のparamsにマッチできます.
//pages/blog/[id].js

const Blog = () => {
   const router = useRouter();
   const { id } = router.query;

   return (
   <div className="blog">
     <Link href="/blog/[id] as={`/blog/${id}/my-page`}>
       Blog: { id }
     </Link>
   </div>
  );
}

//home.js
import Link from 'next/link'

const Home = () => (
<>
<Link href="blog/jeff">To blog/[id]</Link>
/* We can include multiple parameters in our queries as well eg. {"id": "jeff", "foo": "bar"} */
<Link href="blog/jeff?foo=bar">Also to blog/[id]</Link>
</>
)
export default Home
この例は{ id } パラメータは、blog クエリオブジェクトとして{ id }パラメータを含むディレクトリ.それでblog/a.js , blog/b.js , また、スプレッド演算子を使用して動的なルートに到達するファイルツリーのどれだけ下まで拡張できます.例えば、ファイルblog/[id]/[...comments].js のようなすべてのダイナミックルートをキャッチできますblog/abc/jeff , blog/abc/jeff/replies , ブログ/abc/ジャスティン/回答/コメント`など.
次のように.JSはルーティングに関して非常に簡単なオプションを提供します.それも、クライアント側のバンドルのサイズを増加しないAPIエンドポイントを定義する簡単な方法を提供します.デフォルトの関数としてリクエストハンドラ関数をエクスポートします.次.JSドキュメントでは、このAPIルートの優れた例を示します.`
//Here, req is an instance of http.IncomingMessage, and res is an instance of http.ServerResponse
const handler = (req, res) => {
res.cookie('Next.js', 'api-middleware!')
res.end(res.getHeader('Set-Cookie'))
}
export default cookies(handler)

`
In the example above, we also see some of the middlewares provided by Next.js for parsing req : req.cookies , req.query , and req.body . 第1ミドルウェアreq.cookies , リクエストのクッキーを含むオブジェクトです.リクエストにクッキーがなければ、req.cookies デフォルトは空のオブジェクト{} . 次はreq.query , これは文字列クエリを含むオブジェクトであるか、{} ないならば.そして最後にreq.body , これは、content-type . 上記のハンドラはreq.cookies クッキーを取得し、Set-Cookie ヘッダ.その後、私たちは同様に表現するように動作する組み込みの応答メソッドを使用できます.日本建築学会res.status , res.json , など

Thanks for reading! Until next time!

WORKS CITED
Susiripala, Arunoda, et al. “API Routes.” Next.js, Vercel, 2021, nextjs.org/docs/api-routes/introduction.

[Verilog]並列処理ブロック(fork-join)
iOS swift構文20日目🐤