Hur man skapar dynamiska rutter i Next.js

Dynamiska rutter är sidor som låter dig använda anpassade parametrar i en URL. De är särskilt användbara när du skapar sidor för dynamiskt innehåll.

För en blogg kan du använda en dynamisk rutt för att skapa webbadresser baserat på rubrikerna på blogginläggen. Detta tillvägagångssätt är bättre än att skapa en sidkomponent för varje inlägg.

Du kan skapa dynamiska rutter i Next.js genom att definiera två funktioner: getStaticProps och getStaticPaths.

Skapa en dynamisk rutt i Next.js

För att skapa en dynamisk rutt i Next.js, lägg till parenteser på en sida. Till exempel [params].js, [slug].js eller [id].js.

För en blogg kan du använda en snigel för den dynamiska rutten. Så om ett inlägg hade snigeln dynamic-routes-nextjs, skulle den resulterande webbadressen vara https://example.com/dynamic-routes-nextjs.

Skapa en ny fil som heter [slug].js i pages-mappen och skapa Post-komponenten som tar inläggsdata som en rekvisita.

const Post = ({ postData }) => {  return <div>{/* content */}</div>;};

Det finns olika sätt att skicka inläggsdata till Posten. Vilken metod du väljer beror på hur du vill rendera sidan. För att hämta data under byggtiden, använd getStaticProps() och för att hämta den på begäran, använd getServerSideProps().

Använda getStaticProps för att hämta inläggsdata

Blogginlägg ändras inte lika ofta, och det räcker att hämta dem vid byggtiden. Så, modifiera Post-komponenten så att den inkluderar getStaticProps().

import { getSinglePost } from "../../utils/posts"; const Post = ({ content }) => {  return <div>{/* content */}</div>;}; export const getStaticProps = async ({ params }) => {    const post = await getSinglePost(params.slug);    return {      props: { ...post },    };  };

GetStaticProps-funktionen genererar inläggsdata som renderas på sidan. Den använder snigeln från sökvägarna som genereras av getStaticPaths-funktionen.

Använda getStaticPaths för att hämta sökvägar

Funktionen getStaticPaths() returnerar sökvägarna för sidorna som ska förrenderas. Ändra Post-komponenten för att inkludera den:

export const getStaticPaths = async() => {  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));  return {    paths,    fallback: false,  };};

Denna implementering av getStaticPaths hämtar alla inlägg som ska renderas och returnerar slugarna som params.

Sammantaget kommer [slug].js att se ut så här:

import { getAllPosts, getSinglePost } from "../../utils/posts"; const Post = ({ content }) => {  return <div>{content}</div>;}; export const getStaticPaths = async() => {  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));  return {    paths,    fallback: false,  };}; export const getStaticProps = async ({ params }) => {  const post = await getSinglePost(params.slug);   return {    props: { ...post },  };}; export default Post;

Du måste använda getStaticProps() och getStaticPaths() tillsammans för att skapa en dynamisk rutt. GetStaticPaths()-funktionen bör generera de dynamiska rutterna, medan getStaticProps() hämtar data som renderas vid varje rutt.

Skapa kapslade dynamiska rutter i Next.js

För att skapa en kapslad rutt i Next.js måste du skapa en ny mapp i pages-mappen och spara den dynamiska rutten i den.

Till exempel, för att skapa /pages/posts/dynamic-routes-nextjs, spara [slug].js inuti /pages/posts.

Åtkomst till URL-parametrar från dynamiska rutter

Efter att du skapat rutten kan du hämta URL-parametern från den dynamiska rutten med hjälp av useRouter() React hook.

För sidorna/[slug].js, hämta snigeln så här:

import { useRouter } from 'next/router' const Post = () => {  const router = useRouter()  const { slug } = router.query  return <p>Post: {slug}</p>} export default Post

Detta kommer att visa inläggets snigel.

Dynamisk routing med getServerSideProps

Med hjälp av Next.js kan du hämta data vid byggtid och skapa dynamiska rutter. Du kan använda denna kunskap för att förrendera sidor från en lista med objekt.

Om du vill hämta data på varje begäran, använd getServerSideProps istället för getStaticProps. Observera att detta tillvägagångssätt är långsammare; du bör bara använda den när du konsumerar data som ändras regelbundet.