Next.js dynamic router All In One
<h1 id="nextjs-dynamic-router-all-in-one">Next.js dynamic router All In One</h1><blockquote>
<p>dynamic routes</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/740516/202211/740516-20221103181516915-1316168035.gif" alt="image" loading="lazy"></p>
<h2 id="demos">demos</h2>
<ol>
<li>单层动态路由</li>
</ol>
<p><code>/pages/post/.js</code></p>
<pre><code class="language-tsx">import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
return <p>Post: {pid}</p>
}
export default Post
</code></pre>
<ol start="2">
<li>多层嵌套动态路由</li>
</ol>
<p><code>pages/post//.js</code></p>
<pre><code class="language-tsx">
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid, comment } = router.query
return <p>Post: {pid}, {comment}</p>
}
export default Post
</code></pre>
<ol start="3">
<li>不定层级动态路由</li>
</ol>
<p><code>pages/post/[...slug].js</code></p>
<p>Catch all routes<br>
捕捉所有路由</p>
<pre><code class="language-tsx">// `/post/a`
{ "slug": ["a"] }
// `/post/a/b`
{ "slug": ["a", "b"] }
</code></pre>
<p>https://github.com/vercel/next.js/tree/canary/examples/catch-all-routes</p>
<ol start="4">
<li>可选不定层级动态路由</li>
</ol>
<p><code>pages/post/[[...slug]].js</code></p>
<p>Optional catch all routes<br>
可选捕获所有路由</p>
<pre><code class="language-tsx">{ }
// GET `/post` (empty object)
{ "slug": ["a"] }
// `GET /post/a` (single-element array)
{ "slug": ["a", "b"] }
// `GET /post/a/b` (multi-element array)
</code></pre>
<pre><code class="language-tsx">
</code></pre>
<h2 id="link">Link</h2>
<pre><code class="language-tsx">import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/post/abc">Go to pages/post/.js</Link>
</li>
<li>
<Link href="/post/abc?foo=bar">Also goes to pages/post/.js</Link>
</li>
<li>
<Link href="/post/abc/a-comment">
Go to pages/post//.js
</Link>
</li>
</ul>
)
}
export default Home
</code></pre>
<p>https://nextjs.org/docs/routing/introduction#linking-between-pages</p>
<p>https://nextjs.org/docs/api-reference/next/link</p>
<h2 id="dynamic-routing">dynamic-routing</h2>
<ul>
<li>Next.js</li>
<li>SSR</li>
<li>TypeScript</li>
<li>React</li>
<li>JWT</li>
</ul>
<p>https://codedamn.com/learn/nextjs-fundamentals/routing/dynamic-routing.kXHMQoC_R1_</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/WPdJaBFquNc?start=51" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ql5kyJaYbls?start=5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<h2 id="getstaticprops">getStaticProps</h2>
<pre><code class="language-tsx">
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 10 seconds
revalidate: 10, // In seconds
}
}
</code></pre>
<p>https://nextjs.org/docs/api-reference/data-fetching/get-static-props</p>
<h2 id="isr">ISR</h2>
<blockquote>
<p>Incremental Static Regeneration / 增量静态再生</p>
</blockquote>
<blockquote>
<p><code>revalidate</code> & <code>getStaticProps</code></p>
</blockquote>
<pre><code class="language-tsx">function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 10 seconds
revalidate: 10, // In seconds
}
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
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: blocking } will server-render pages
// on-demand if the path doesn't exist.
return { paths, fallback: 'blocking' }
}
export default Blog
</code></pre>
<p>https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration</p>
<p><img src="https://img2022.cnblogs.com/blog/740516/202211/740516-20221103234527648-1146736468.png" alt="image" loading="lazy"></p>
<p>https://codedamn.com/learn/nextjs-fundamentals/server-side-rendering/revalidate-parameter.vo2Uk5qRAIk</p>
<blockquote>
<p>无法将标签 "#revalidate" 添加到博文, 可能是达到了标签数量上限; 如有疑问请联系 contact@mail.cnblos.com</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/740516/202211/740516-20221103234834000-186434713.png" alt="image" loading="lazy"></p>
<blockquote>
<p>ISR blogs</p>
</blockquote>
<p>https://vercel.com/docs/concepts/incremental-static-regeneration/overview</p>
<p>https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/</p>
<p>https://spacejelly.dev/posts/how-to-update-static-content-in-next-js-automatically-with-incremental-static-regeneration-isr</p>
<p>https://prismic.io/blog/nextjs-sites-on-demand-isr</p>
<h2 id="refs">refs</h2>
<p>https://nextjs.org/learn/basics/dynamic-routes</p>
<p>https://nextjs.org/docs/routing/dynamic-routes</p>
<p>https://nextjs.org/docs/routing/introduction</p>
<p>https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing</p>
<p>https://nextjs.org/docs/advanced-features/automatic-static-optimization</p>
<p>https://github.com/vercel/next.js</p>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2021</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/16855384.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/16855384.html
頁:
[1]