var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),y=(e,n)=>{for(var s in n)l(e,s,{get:n[s],enumerable:!0})},i=(e,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of N(n))!k.call(e,c)&&c!==s&&l(e,c,{get:()=>n[c],enumerable:!(t=h(n,c))||t.enumerable});return e};var w=(e,n,s)=>(s=e!=null?m(u(e)):{},i(n||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),x=e=>i(l({},"__esModule",{value:!0}),e);var p=g((j,o)=>{o.exports=_jsx_runtime});var v={};y(v,{default:()=>d,frontmatter:()=>f});var a=w(p()),f={title:"nextjs intercepting routes",date:"2025-03-06",tags:["react","nextjs"]};function r(e){let n={a:"a",blockquote:"blockquote",code:"code",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:`Nextjs has several ways to handle routes. Today i want to show you how to intercept routes. Let's start with a simple example.`}),` `,(0,a.jsx)(n.h3,{children:"Create a gallery page"}),` `,(0,a.jsx)(n.p,{children:"First, let's create a gallery page with a list of images."}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// app/gallery/page.tsx"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"Gallery"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," images ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" id",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" id",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" id",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"images",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Link"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"id"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:"/gallery/"}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),"id",(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Image"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"src"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"alt"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"alt"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"width"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"height"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:"Now we have a gallery page with a list of images."}),` `,(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{src:"https://askybig.github.io/ImageStore/nextjs-intercepting-routes/gallery.png",alt:""})}),` `,(0,a.jsx)(n.h3,{children:"Add dynamic routes"}),` `,(0,a.jsxs)(n.p,{children:["When we visit the url like ",(0,a.jsx)(n.code,{children:"/gallery/1"}),", it will redirect to ",(0,a.jsx)(n.code,{children:"/gallery/1"}),". 1 represents the id of the image."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// app/gallery/[imageId]/page.tsx"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"next/image"'}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"ImagePage"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," params ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," imageId ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="}),` params `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"getImageById"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"id",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," images ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" id",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" id",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token number",children:"3"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" id",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," images",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"id",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," image ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"getImageById"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"imageId",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Image not found"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"container mx-auto p-8",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"text-2xl font-bold mb-4",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Image "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"imageId",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token plain-text",children:` `})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Image"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"src"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"alt"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"alt"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"width"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"height"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"rounded-lg",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["Then we have a dynamic route for each image. We can just visit ",(0,a.jsx)(n.code,{children:"/gallery/1"}),` to see the image. `,(0,a.jsx)(n.img,{src:"https://askybig.github.io/ImageStore/nextjs-intercepting-routes/gallery1.png",alt:""})]}),` `,(0,a.jsx)(n.h3,{children:"Intercept routes"}),` `,(0,a.jsxs)(n.p,{children:["As you can see in the ",(0,a.jsx)(n.a,{href:"https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes",children:"official docs"}),":"]}),` `,(0,a.jsxs)(n.blockquote,{children:[` `,(0,a.jsx)(n.p,{children:"Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context."}),` `]}),` `,(0,a.jsx)(n.p,{children:"This paragraph is a bit complicated to understand. Let's imagine such a scenario:"}),` `,(0,a.jsx)(n.p,{children:"We have a gallery page, and when we click the image, we want to display the image. But we don't want users leave the gallery page. You know in most cases, when user redirect to the new page, they may not come back again."}),` `,(0,a.jsx)(n.pre,{className:"language-text",children:(0,a.jsxs)(n.code,{className:"language-text code-highlight",children:[(0,a.jsx)(n.span,{className:"code-line",children:`(.) to match segments on the same level `}),(0,a.jsx)(n.span,{className:"code-line",children:`(..) to match segments one level above `}),(0,a.jsx)(n.span,{className:"code-line",children:`(..)(..) to match segments two levels above `}),(0,a.jsx)(n.span,{className:"code-line",children:`(...) to match segments from the root app directory `})]})}),` `,(0,a.jsxs)(n.p,{children:["Let's use first rule ",(0,a.jsx)(n.code,{children:"(.)"})," to match segments on the same level."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// app/(.gallery)/[imageId]/page.js"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token string",children:'"use client"'}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"next/image"'}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useRouter ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"next/navigation"'}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," useEffect ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," use ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"ImageModal"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," params ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," router ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useRouter"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," unwrappedParams ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," params ",(0,a.jsx)(n.span,{className:"token keyword",children:"instanceof"})," ",(0,a.jsx)(n.span,{className:"token class-name",children:(0,a.jsx)(n.span,{className:"token builtin",children:"Promise"})})," ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token function",children:"use"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"params",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"}),` params `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," imageId ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," unwrappedParams",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"imageId"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"imageData",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setImageData",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"error",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setError",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"loading",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setLoading",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"imageId",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setLoading"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"try"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," images ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 1"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 2"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token number",children:"3"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" src",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"https://placehold.co/300x150@2x.png?text=3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" alt",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"gallery image 3"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"150"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," image ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," images",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"imageId",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setImageData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"image",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"else"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setError"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:"Image with ID "}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"imageId",(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:" not found"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"catch"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"err",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"error"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Error loading image:"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," err",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setError"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Error loading image data"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"finally"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setLoading"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"imageId",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"handleKeyDown"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"e",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"e",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"key"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token string",children:'"Escape"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"closeModal"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"addEventListener"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"keydown"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," handleKeyDown",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"body"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"style"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"overflow"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token string",children:'"hidden"'}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"removeEventListener"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"keydown"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," handleKeyDown",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"body"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"style"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"overflow"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token string",children:'"auto"'}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"closeModal"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" router",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"back"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"handleModalClick"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"e",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" e",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"stopPropagation"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"closeModal",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"relative bg-white/10 rounded-lg p-4 max-w-[90%] max-h-[90%] overflow-auto",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"handleModalClick",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"flex justify-end items-center mb-4",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"closeModal",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"text-white hover:text-gray-300 text-2xl",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"aria-label"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"Close modal",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token plain-text",children:` × `})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token plain-text",children:` `})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"flex justify-center",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"error ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"text-red-400 p-4",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"error",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," loading ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"text-gray-300 p-4",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Loading image..."}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" imageData ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Image"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"imageData",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"src"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"alt"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"imageData",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"alt"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"imageData",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"width"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"imageData",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"height"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"rounded-lg max-h-[70vh] w-auto object-contain",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["We can see the modal window when we click the image, and we can see the url is ",(0,a.jsx)(n.code,{children:"/gallery/1"})," in the browser. Then we can share the url to others."]}),` `,(0,a.jsx)("video",{src:"https://askybig.github.io/ImageStore/nextjs-intercepting-routes/intercept.mp4",controls:!0}),` `,(0,a.jsx)(n.h3,{children:"How it works"}),` `,(0,a.jsx)(n.p,{children:"In Next.js's intercepting routes mechanism:"}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsx)(n.li,{children:"When a user navigates from /gallery to /gallery/1 through client-side navigation (clicking a link), Next.js detects that there is an intercepting route matching (.)gallery/[imageId], so it displays a modal window."}),` `,(0,a.jsx)(n.li,{children:"When a user directly accesses /gallery/1 (for example, by opening in a new tab or refreshing the page), Next.js checks if there is a standard route matching this path. If gallery/[imageId]/page.js exists, it renders this page instead of the modal window."}),` `]}),` `,(0,a.jsx)(n.p,{children:"These two files typically coexist:"}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsx)(n.li,{children:"gallery/[imageId]/page.js - handles direct access"}),` `,(0,a.jsx)(n.li,{children:"(.)gallery/[imageId]/page.js - handles intercepting routes (modal window)"}),` `]}),` `,(0,a.jsx)(n.p,{children:"Next.js decides which one to use based on the following rules:"}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsx)(n.li,{children:"If the user navigates through client-side navigation from the same level route, use the intercepting route"}),` `,(0,a.jsx)(n.li,{children:"If the user directly accesses the URL or navigates from elsewhere, use the standard route"}),` `]}),` `,(0,a.jsx)(n.p,{children:"For a complete user experience, both files should be provided, but they can share most of their logic, differing only in presentation style (one as a full page, one as a modal window)."})]})}function d(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(r,{...e})}):r(e)}return x(v);})(); ;return Component;