Please enable JavaScript.

Coggle requires JavaScript to display documents.

strapi/next.js Routes - Coggle Diagram

- - - - optional catch all routes feature. See the related docs:
        
        / https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes
        
        Dynamic routes can be extended to catch all paths by adding three dots (...) inside
        
        Catch all routes can be made optional by including the parameter in double brackets
        
        Dynamic Routes :red_flag: NEXT.js website
        
        In Next.js you can add brackets to a page ([param]) to create a dynamic route
        
        (a.k.a. url slugs, pretty urls, and others).
        
        pages/post/[pid].js
        
        const Post = () => {... }
        
        5 more items...
    - - strapi
        
        pages/[[...slug]].js
        
        This file generates all the app's route.
    - - Parameters
        
        Sections
        
        content sections
        
        metadata
        
        // Merge default site SEO settings with page specific SEO settings
        
        metadataWithDefaults
        
        ...global.attributes.metadata
        
        <Layout global={global} pageContext={pageContext}>
        
        ...metadata,
        
        preview
        
        global
        
        pageContext
      - const Router = useRouter()
        
        usage examples.
        
        Navigating to pages/about.js, which is a predefined route
        
        router.isFallback
        
        isFallback: boolean - Whether the current page is in fallback mode.
        
        :true
        
        you may statically generate a small subset of pages and use fallback: true for the rest. When someone requests a page that’s not generated yet, the user will see the page with a loading indicator.
        
        Makes so not every pages is pre-renderd
        
        if (!router.isFallback && !sections?.length) { 404}
        
        (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
        
        &&
        
        for a set of Boolean operands will be true if and only if all the operands are true.
    - - Dynamic routing is a technique in which a router learns about routing information without an administrator's help and adds the best rout
  - - - getStaticProps (Static Generation)
        
        Function
        
        When you navigate to a page that's pre-rendered using getStaticProps , Next.js fetches this JSON file (pre-computed at build time) and uses it as the props for the page component.
        
        const localePages = await fetchAPI("/pages", {locale, fields: ["slug", "locale"], })
        
        import { getPageData, fetchAPI, getGlobalData } from "utils/api"
        
        utils/api.js
        
        function fetchAPI(path, urlParamsObject = {}, options = {})
        
        const mergedOptions = {}
        
        2 more items...
        
        The why to get the ctx of backend
        
        const pages = await context.locales.reduce( async)
        
        // Get all pages from Strapi
        
        const currentPages = await currentPagesPromise
        
        return [...currentPages, ...localePages.data]
        
        const localePages = await fetchAPI("/pages",
        
        return [...currentPages, ...localePages.data]
        
        After lamba expression (ASYNC)
        
        ,Promise.resolve([])
        
        The Promise.resolve() method returns a Promise object that is resolved with a given value.
        
        const paths = pages.map((page)
        
        const { slug, locale } = page.attributes
        
        const slugArray = !slug ? false : slug.split("/")
        
        // Decompose the slug that was saved in Strapi
        
        If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
        
        Pre-rendering, or prerendering, is a web browser feature that speeds up your web surfing experience. When you view a web page, some content from another page or site might be prerendered in anticipation of you going there next.
    - - getStaticPaths
        
        If you export an async function called getStaticPaths from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.
        
        Dynamic routing is a technique in which a router learns about routing information without an administrator's help and adds the best route to its
        
        If a page has dynamic routes (documentation) and uses getStaticProps it needs to define a list of paths that have to be rendered to HTML at build time.
  - - - Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
        
        request
        
        to ask for something:
- - - - Text
    - - compoent
    - - Dynamic zone
    - - text
- - - - /en
        
        /en/pricing
        
        /en/contact
      - [+3 more]
        
        /fr ?
        
        Most likely