{"pageProps":{"post":{"mdxSource":"var Component=(()=>{var l=Object.create;var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var r=n=>o(n,\"__esModule\",{value:!0});var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{r(n);for(var s in e)o(n,s,{get:e[s],enumerable:!0})},g=(n,e,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!p.call(n,i)&&i!==\"default\"&&o(n,i,{get:()=>e[i],enumerable:!(s=c(e,i))||s.enumerable});return n},b=n=>g(r(o(n!=null?l(u(n)):{},\"default\",n&&n.__esModule&&\"default\"in n?{get:()=>n.default,enumerable:!0}:{value:n,enumerable:!0})),n);var d=m((I,a)=>{a.exports=_jsx_runtime});var N={};f(N,{default:()=>y,frontmatter:()=>x});var t=b(d()),x={title:\"Introducing Multi-part Posts with Nested Routing\",date:\"2021-05-02\",tags:[\"multi-author\",\"next-js\",\"feature\"],draft:!1,summary:\"The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!\"};function j(n){let e=Object.assign({h1:\"h1\",a:\"a\",span:\"span\",p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\"},n.components),{wrapper:s}=e,i=(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.h1,{id:\"nested-routes\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#nested-routes\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Nested Routes\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The blog template supports posts in nested sub-folders. This helps in organisation and can be used to group posts of similar content e.g. a multi-part series. This post is itself an example of a nested route! It's located in the \",(0,t.jsx)(e.code,{children:\"/data/blog/nested-route\"}),\" folder.\"]}),`\n`,(0,t.jsxs)(e.h2,{id:\"how\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#how\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"How\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Simplify create multiple folders inside the main \",(0,t.jsx)(e.code,{children:\"/data/blog\"}),\" folder and add your \",(0,t.jsx)(e.code,{children:\".md\"}),\"/\",(0,t.jsx)(e.code,{children:\".mdx\"}),\" files to them. You can even create something like \",(0,t.jsx)(e.code,{children:\"/data/blog/nested-route/deeply-nested-route/my-post.md\"})]}),`\n`,(0,t.jsx)(e.p,{children:\"We use Next.js catch all routes to handle the routing and path creations.\"}),`\n`,(0,t.jsxs)(e.h2,{id:\"use-cases\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#use-cases\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Use Cases\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Here's some reasons to use nested routes\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"More logical content organisation (blogs will still be displayed based on the created date)\"}),`\n`,(0,t.jsx)(e.li,{children:\"Multi-part posts\"}),`\n`,(0,t.jsx)(e.li,{children:\"Different sub-routes for each author\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Internationalization (though it would be recommended to use \",(0,t.jsx)(e.a,{href:\"https://nextjs.org/docs/advanced-features/i18n-routing\",children:\"Next.js built in i8n routing\"}),\")\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.h2,{id:\"note\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#note\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Note\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The previous/next post links at bottom of the template is currently sorted by date. One could explore modifying the template to refer the reader to the previous/next post in the series, rather than by date.\"}),`\n`]})]});return s?(0,t.jsx)(s,Object.assign({},n,{children:i})):i}var y=j;return N;})();\n;return Component.default;","toc":[{"value":"Nested Routes","url":"#nested-routes","depth":1},{"value":"How","url":"#how","depth":2},{"value":"Use Cases","url":"#use-cases","depth":2},{"value":"Note","url":"#note","depth":2}],"frontMatter":{"readingTime":{"text":"2 min read","minutes":1.16,"time":69600,"words":232},"slug":"nested-route/introducing-multi-part-posts-with-nested-routing","fileName":"nested-route/introducing-multi-part-posts-with-nested-routing.md","title":"Introducing Multi-part Posts with Nested Routing","date":"2021-05-02T00:00:00.000Z","tags":["multi-author","next-js","feature"],"draft":false,"summary":"The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!"}},"authorDetails":[{"readingTime":{"text":"1 min read","minutes":0.615,"time":36900,"words":123},"slug":["default"],"fileName":"default.md","name":"Tails Azimuth","avatar":"/static/images/avatar.png","occupation":"Professor of Atmospheric Science","company":"Stanford University","email":"address@yoursite.com","twitter":"https://twitter.com/Twitter","linkedin":"https://www.linkedin.com","github":"https://github.com","date":null}],"prev":{"title":"Introducing Tailwind Nextjs Starter Blog","date":"2021-01-12T00:00:00.000Z","lastmod":"2021-09-08","tags":["next-js","tailwind","guide"],"draft":false,"summary":"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.","images":["/static/images/canada/mountains.jpg","/static/images/canada/toronto.jpg"],"authors":["default","sparrowhawk"],"slug":"introducing-tailwind-nextjs-starter-blog"},"next":{"title":"New features in v1","date":"2021-08-07T15:32:14.000Z","lastmod":"2021-10-27","tags":["next-js","tailwind","guide"],"draft":false,"summary":"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more","layout":"PostSimple","slug":"new-features-in-v1"}},"__N_SSG":true}