[{"data":1,"prerenderedAt":1240},["ShallowReactive",2],{"docs-cloud/frameworks/nextjs":3},{"id":4,"title":5,"body":6,"description":1230,"extension":1231,"meta":1232,"navigation":155,"path":1233,"seo":1234,"seoDescription":1235,"seoTitle":1236,"sitemap":1237,"stem":1238,"__hash__":1239},"docs/docs/cloud/frameworks/nextjs.md","Next.js",{"type":7,"value":8,"toc":1224},"minimark",[9,13,17,34,39,65,88,118,129,214,226,230,563,570,574,588,605,949,1171,1185,1195,1199,1220],[10,11,5],"h1",{"id":12},"nextjs",[14,15,16],"p",{},"There are two ways to search a CelerSearch instance from a Next.js App Router\napp:",[18,19,20,28],"ul",{},[21,22,23,27],"li",{},[24,25,26],"strong",{},"Server Components"," query the instance directly with the official SDK.\nThe key never leaves the server.",[21,29,30,33],{},[24,31,32],{},"React InstantSearch"," gives you a search-as-you-type UI. Its requests go\nthrough a route handler in your app, which adds the key on the server.",[35,36,38],"h2",{"id":37},"_1-install-and-configure","1. Install and configure",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-bash shiki shiki-themes github-light github-dark","npm install meilisearch\n","bash","",[47,48,49],"code",{"__ignoreMap":45},[50,51,54,58,62],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sScJk","npm",[50,59,61],{"class":60},"sZZnC"," install",[50,63,64],{"class":60}," meilisearch\n",[14,66,67,68,71,72,75,76,79,80,87],{},"Copy the ",[24,69,70],{},"Endpoint URL"," and ",[24,73,74],{},"API key"," from your instance's ",[24,77,78],{},"Connection\ndetails"," at ",[81,82,86],"a",{"href":83,"rel":84},"https://app.celersearch.com",[85],"nofollow","app.celersearch.com",":",[40,89,92],{"className":42,"code":90,"filename":91,"language":44,"meta":45,"style":45},"CELERSEARCH_URL=https://your-endpoint-url\nCELERSEARCH_API_KEY=your-api-key\n",".env.local",[47,93,94,107],{"__ignoreMap":45},[50,95,96,100,104],{"class":52,"line":53},[50,97,99],{"class":98},"sVt8B","CELERSEARCH_URL",[50,101,103],{"class":102},"szBVR","=",[50,105,106],{"class":60},"https://your-endpoint-url\n",[50,108,110,113,115],{"class":52,"line":109},2,[50,111,112],{"class":98},"CELERSEARCH_API_KEY",[50,114,103],{"class":102},[50,116,117],{"class":60},"your-api-key\n",[119,120,122],"warning",{"title":121},"No NEXT_PUBLIC_ prefix",[14,123,124,125,128],{},"The API key has full access to your instance. Without the ",[47,126,127],{},"NEXT_PUBLIC_","\nprefix, Next.js keeps these variables on the server. Never add the prefix to\nthe key.",[40,130,135],{"className":131,"code":132,"filename":133,"language":134,"meta":45,"style":45},"language-ts shiki shiki-themes github-light github-dark","import { Meilisearch } from 'meilisearch'\n\nexport const search = new Meilisearch({\n  host: process.env.CELERSEARCH_URL!,\n  apiKey: process.env.CELERSEARCH_API_KEY!,\n})\n","lib/search.ts","ts",[47,136,137,151,157,182,196,208],{"__ignoreMap":45},[50,138,139,142,145,148],{"class":52,"line":53},[50,140,141],{"class":102},"import",[50,143,144],{"class":98}," { Meilisearch } ",[50,146,147],{"class":102},"from",[50,149,150],{"class":60}," 'meilisearch'\n",[50,152,153],{"class":52,"line":109},[50,154,156],{"emptyLinePlaceholder":155},true,"\n",[50,158,160,163,166,170,173,176,179],{"class":52,"line":159},3,[50,161,162],{"class":102},"export",[50,164,165],{"class":102}," const",[50,167,169],{"class":168},"sj4cs"," search",[50,171,172],{"class":102}," =",[50,174,175],{"class":102}," new",[50,177,178],{"class":56}," Meilisearch",[50,180,181],{"class":98},"({\n",[50,183,185,188,190,193],{"class":52,"line":184},4,[50,186,187],{"class":98},"  host: process.env.",[50,189,99],{"class":168},[50,191,192],{"class":102},"!",[50,194,195],{"class":98},",\n",[50,197,199,202,204,206],{"class":52,"line":198},5,[50,200,201],{"class":98},"  apiKey: process.env.",[50,203,112],{"class":168},[50,205,192],{"class":102},[50,207,195],{"class":98},[50,209,211],{"class":52,"line":210},6,[50,212,213],{"class":98},"})\n",[14,215,216,217,221,222,225],{},"Index your content with the same client from a script, a route handler or a\nbackground job. See ",[81,218,220],{"href":219},"/docs/cloud/connect-any-app","Connect Any App"," for\n",[47,223,224],{},"addDocuments",".",[35,227,229],{"id":228},"_2-search-in-a-server-component","2. Search in a Server Component",[40,231,236],{"className":232,"code":233,"filename":234,"language":235,"meta":45,"style":45},"language-tsx shiki shiki-themes github-light github-dark","import { search } from '@/lib/search'\n\nexport default async function SearchPage({\n  searchParams,\n}: {\n  searchParams: Promise\u003C{ q?: string }>\n}) {\n  const { q = '' } = await searchParams\n  const { hits } = await search.index('movies').search(q, { limit: 20 })\n\n  return (\n    \u003Cmain>\n      \u003Cform>\n        \u003Cinput name=\"q\" defaultValue={q} placeholder=\"Search movies\" />\n      \u003C/form>\n      \u003Cul>\n        {hits.map((hit) => (\n          \u003Cli key={hit.id}>{hit.title}\u003C/li>\n        ))}\n      \u003C/ul>\n    \u003C/main>\n  )\n}\n","app/search/page.tsx","tsx",[47,237,238,250,254,272,280,290,314,320,347,390,395,404,417,428,464,474,483,506,526,532,541,551,557],{"__ignoreMap":45},[50,239,240,242,245,247],{"class":52,"line":53},[50,241,141],{"class":102},[50,243,244],{"class":98}," { search } ",[50,246,147],{"class":102},[50,248,249],{"class":60}," '@/lib/search'\n",[50,251,252],{"class":52,"line":109},[50,253,156],{"emptyLinePlaceholder":155},[50,255,256,258,261,264,267,270],{"class":52,"line":159},[50,257,162],{"class":102},[50,259,260],{"class":102}," default",[50,262,263],{"class":102}," async",[50,265,266],{"class":102}," function",[50,268,269],{"class":56}," SearchPage",[50,271,181],{"class":98},[50,273,274,278],{"class":52,"line":184},[50,275,277],{"class":276},"s4XuR","  searchParams",[50,279,195],{"class":98},[50,281,282,285,287],{"class":52,"line":198},[50,283,284],{"class":98},"}",[50,286,87],{"class":102},[50,288,289],{"class":98}," {\n",[50,291,292,294,296,299,302,305,308,311],{"class":52,"line":210},[50,293,277],{"class":276},[50,295,87],{"class":102},[50,297,298],{"class":56}," Promise",[50,300,301],{"class":98},"\u003C{ ",[50,303,304],{"class":276},"q",[50,306,307],{"class":102},"?:",[50,309,310],{"class":168}," string",[50,312,313],{"class":98}," }>\n",[50,315,317],{"class":52,"line":316},7,[50,318,319],{"class":98},"}) {\n",[50,321,323,326,329,331,333,336,339,341,344],{"class":52,"line":322},8,[50,324,325],{"class":102},"  const",[50,327,328],{"class":98}," { ",[50,330,304],{"class":168},[50,332,172],{"class":102},[50,334,335],{"class":60}," ''",[50,337,338],{"class":98}," } ",[50,340,103],{"class":102},[50,342,343],{"class":102}," await",[50,345,346],{"class":98}," searchParams\n",[50,348,350,352,354,357,359,361,363,366,369,372,375,378,381,384,387],{"class":52,"line":349},9,[50,351,325],{"class":102},[50,353,328],{"class":98},[50,355,356],{"class":168},"hits",[50,358,338],{"class":98},[50,360,103],{"class":102},[50,362,343],{"class":102},[50,364,365],{"class":98}," search.",[50,367,368],{"class":56},"index",[50,370,371],{"class":98},"(",[50,373,374],{"class":60},"'movies'",[50,376,377],{"class":98},").",[50,379,380],{"class":56},"search",[50,382,383],{"class":98},"(q, { limit: ",[50,385,386],{"class":168},"20",[50,388,389],{"class":98}," })\n",[50,391,393],{"class":52,"line":392},10,[50,394,156],{"emptyLinePlaceholder":155},[50,396,398,401],{"class":52,"line":397},11,[50,399,400],{"class":102},"  return",[50,402,403],{"class":98}," (\n",[50,405,407,410,414],{"class":52,"line":406},12,[50,408,409],{"class":98},"    \u003C",[50,411,413],{"class":412},"s9eBZ","main",[50,415,416],{"class":98},">\n",[50,418,420,423,426],{"class":52,"line":419},13,[50,421,422],{"class":98},"      \u003C",[50,424,425],{"class":412},"form",[50,427,416],{"class":98},[50,429,431,434,437,440,442,445,448,450,453,456,458,461],{"class":52,"line":430},14,[50,432,433],{"class":98},"        \u003C",[50,435,436],{"class":412},"input",[50,438,439],{"class":56}," name",[50,441,103],{"class":102},[50,443,444],{"class":60},"\"q\"",[50,446,447],{"class":56}," defaultValue",[50,449,103],{"class":102},[50,451,452],{"class":98},"{q} ",[50,454,455],{"class":56},"placeholder",[50,457,103],{"class":102},[50,459,460],{"class":60},"\"Search movies\"",[50,462,463],{"class":98}," />\n",[50,465,467,470,472],{"class":52,"line":466},15,[50,468,469],{"class":98},"      \u003C/",[50,471,425],{"class":412},[50,473,416],{"class":98},[50,475,477,479,481],{"class":52,"line":476},16,[50,478,422],{"class":98},[50,480,18],{"class":412},[50,482,416],{"class":98},[50,484,486,489,492,495,498,501,504],{"class":52,"line":485},17,[50,487,488],{"class":98},"        {hits.",[50,490,491],{"class":56},"map",[50,493,494],{"class":98},"((",[50,496,497],{"class":276},"hit",[50,499,500],{"class":98},") ",[50,502,503],{"class":102},"=>",[50,505,403],{"class":98},[50,507,509,512,514,517,519,522,524],{"class":52,"line":508},18,[50,510,511],{"class":98},"          \u003C",[50,513,21],{"class":412},[50,515,516],{"class":56}," key",[50,518,103],{"class":102},[50,520,521],{"class":98},"{hit.id}>{hit.title}\u003C/",[50,523,21],{"class":412},[50,525,416],{"class":98},[50,527,529],{"class":52,"line":528},19,[50,530,531],{"class":98},"        ))}\n",[50,533,535,537,539],{"class":52,"line":534},20,[50,536,469],{"class":98},[50,538,18],{"class":412},[50,540,416],{"class":98},[50,542,544,547,549],{"class":52,"line":543},21,[50,545,546],{"class":98},"    \u003C/",[50,548,413],{"class":412},[50,550,416],{"class":98},[50,552,554],{"class":52,"line":553},22,[50,555,556],{"class":98},"  )\n",[50,558,560],{"class":52,"line":559},23,[50,561,562],{"class":98},"}\n",[14,564,565,566,569],{},"Submitting the form reloads the page with ",[47,567,568],{},"?q=",", and the search runs on the\nserver.",[35,571,573],{"id":572},"_3-instant-search-with-react-instantsearch","3. Instant search with React InstantSearch",[14,575,576,579,580,583,584,587],{},[47,577,578],{},"instant-meilisearch"," connects InstantSearch to Meilisearch. It sends searches\nas ",[47,581,582],{},"POST /multi-search"," and searchable facet lists as\n",[47,585,586],{},"POST /indexes/{uid}/facet-search",". Point it at a route handler in your app\ninstead of at CelerSearch, and the handler forwards the request with the real\nkey.",[40,589,591],{"className":42,"code":590,"language":44,"meta":45,"style":45},"npm install @meilisearch/instant-meilisearch react-instantsearch\n",[47,592,593],{"__ignoreMap":45},[50,594,595,597,599,602],{"class":52,"line":53},[50,596,57],{"class":56},[50,598,61],{"class":60},[50,600,601],{"class":60}," @meilisearch/instant-meilisearch",[50,603,604],{"class":60}," react-instantsearch\n",[40,606,609],{"className":131,"code":607,"filename":608,"language":134,"meta":45,"style":45},"// Only these indexes can be searched from the browser.\nconst ALLOWED_INDEXES = new Set(['movies'])\n\nexport async function POST(request: Request) {\n  const { queries } = await request.json()\n\n  if (\n    !Array.isArray(queries) ||\n    queries.length === 0 ||\n    !queries.every((query) => ALLOWED_INDEXES.has(query?.indexUid))\n  ) {\n    return Response.json({ message: 'Index not allowed' }, { status: 403 })\n  }\n\n  const response = await fetch(`${process.env.CELERSEARCH_URL}/multi-search`, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      Authorization: `Bearer ${process.env.CELERSEARCH_API_KEY}`,\n    },\n    body: JSON.stringify({ queries }),\n  })\n\n  return Response.json(await response.json(), { status: response.status })\n}\n","app/api/search/multi-search/route.ts",[47,610,611,617,640,644,668,692,696,703,720,737,766,771,795,800,804,841,851,856,869,892,897,913,918,922,944],{"__ignoreMap":45},[50,612,613],{"class":52,"line":53},[50,614,616],{"class":615},"sJ8bj","// Only these indexes can be searched from the browser.\n",[50,618,619,622,625,627,629,632,635,637],{"class":52,"line":109},[50,620,621],{"class":102},"const",[50,623,624],{"class":168}," ALLOWED_INDEXES",[50,626,172],{"class":102},[50,628,175],{"class":102},[50,630,631],{"class":56}," Set",[50,633,634],{"class":98},"([",[50,636,374],{"class":60},[50,638,639],{"class":98},"])\n",[50,641,642],{"class":52,"line":159},[50,643,156],{"emptyLinePlaceholder":155},[50,645,646,648,650,652,655,657,660,662,665],{"class":52,"line":184},[50,647,162],{"class":102},[50,649,263],{"class":102},[50,651,266],{"class":102},[50,653,654],{"class":56}," POST",[50,656,371],{"class":98},[50,658,659],{"class":276},"request",[50,661,87],{"class":102},[50,663,664],{"class":56}," Request",[50,666,667],{"class":98},") {\n",[50,669,670,672,674,677,679,681,683,686,689],{"class":52,"line":198},[50,671,325],{"class":102},[50,673,328],{"class":98},[50,675,676],{"class":168},"queries",[50,678,338],{"class":98},[50,680,103],{"class":102},[50,682,343],{"class":102},[50,684,685],{"class":98}," request.",[50,687,688],{"class":56},"json",[50,690,691],{"class":98},"()\n",[50,693,694],{"class":52,"line":210},[50,695,156],{"emptyLinePlaceholder":155},[50,697,698,701],{"class":52,"line":316},[50,699,700],{"class":102},"  if",[50,702,403],{"class":98},[50,704,705,708,711,714,717],{"class":52,"line":322},[50,706,707],{"class":102},"    !",[50,709,710],{"class":98},"Array.",[50,712,713],{"class":56},"isArray",[50,715,716],{"class":98},"(queries) ",[50,718,719],{"class":102},"||\n",[50,721,722,725,728,731,734],{"class":52,"line":349},[50,723,724],{"class":98},"    queries.",[50,726,727],{"class":168},"length",[50,729,730],{"class":102}," ===",[50,732,733],{"class":168}," 0",[50,735,736],{"class":102}," ||\n",[50,738,739,741,744,747,749,752,754,756,758,760,763],{"class":52,"line":392},[50,740,707],{"class":102},[50,742,743],{"class":98},"queries.",[50,745,746],{"class":56},"every",[50,748,494],{"class":98},[50,750,751],{"class":276},"query",[50,753,500],{"class":98},[50,755,503],{"class":102},[50,757,624],{"class":168},[50,759,225],{"class":98},[50,761,762],{"class":56},"has",[50,764,765],{"class":98},"(query?.indexUid))\n",[50,767,768],{"class":52,"line":397},[50,769,770],{"class":98},"  ) {\n",[50,772,773,776,779,781,784,787,790,793],{"class":52,"line":406},[50,774,775],{"class":102},"    return",[50,777,778],{"class":98}," Response.",[50,780,688],{"class":56},[50,782,783],{"class":98},"({ message: ",[50,785,786],{"class":60},"'Index not allowed'",[50,788,789],{"class":98}," }, { status: ",[50,791,792],{"class":168},"403",[50,794,389],{"class":98},[50,796,797],{"class":52,"line":419},[50,798,799],{"class":98},"  }\n",[50,801,802],{"class":52,"line":430},[50,803,156],{"emptyLinePlaceholder":155},[50,805,806,808,811,813,815,818,820,823,826,828,831,833,835,838],{"class":52,"line":466},[50,807,325],{"class":102},[50,809,810],{"class":168}," response",[50,812,172],{"class":102},[50,814,343],{"class":102},[50,816,817],{"class":56}," fetch",[50,819,371],{"class":98},[50,821,822],{"class":60},"`${",[50,824,825],{"class":98},"process",[50,827,225],{"class":60},[50,829,830],{"class":98},"env",[50,832,225],{"class":60},[50,834,99],{"class":168},[50,836,837],{"class":60},"}/multi-search`",[50,839,840],{"class":98},", {\n",[50,842,843,846,849],{"class":52,"line":476},[50,844,845],{"class":98},"    method: ",[50,847,848],{"class":60},"'POST'",[50,850,195],{"class":98},[50,852,853],{"class":52,"line":485},[50,854,855],{"class":98},"    headers: {\n",[50,857,858,861,864,867],{"class":52,"line":508},[50,859,860],{"class":60},"      'Content-Type'",[50,862,863],{"class":98},": ",[50,865,866],{"class":60},"'application/json'",[50,868,195],{"class":98},[50,870,871,874,877,879,881,883,885,887,890],{"class":52,"line":528},[50,872,873],{"class":98},"      Authorization: ",[50,875,876],{"class":60},"`Bearer ${",[50,878,825],{"class":98},[50,880,225],{"class":60},[50,882,830],{"class":98},[50,884,225],{"class":60},[50,886,112],{"class":168},[50,888,889],{"class":60},"}`",[50,891,195],{"class":98},[50,893,894],{"class":52,"line":534},[50,895,896],{"class":98},"    },\n",[50,898,899,902,905,907,910],{"class":52,"line":543},[50,900,901],{"class":98},"    body: ",[50,903,904],{"class":168},"JSON",[50,906,225],{"class":98},[50,908,909],{"class":56},"stringify",[50,911,912],{"class":98},"({ queries }),\n",[50,914,915],{"class":52,"line":553},[50,916,917],{"class":98},"  })\n",[50,919,920],{"class":52,"line":559},[50,921,156],{"emptyLinePlaceholder":155},[50,923,925,927,929,931,933,936,939,941],{"class":52,"line":924},24,[50,926,400],{"class":102},[50,928,778],{"class":98},[50,930,688],{"class":56},[50,932,371],{"class":98},[50,934,935],{"class":102},"await",[50,937,938],{"class":98}," response.",[50,940,688],{"class":56},[50,942,943],{"class":98},"(), { status: response.status })\n",[50,945,947],{"class":52,"line":946},25,[50,948,562],{"class":98},[40,950,953],{"className":232,"code":951,"filename":952,"language":235,"meta":45,"style":45},"'use client'\n\nimport { instantMeiliSearch } from '@meilisearch/instant-meilisearch'\nimport { Hits, InstantSearch, SearchBox } from 'react-instantsearch'\n\n// The SDK needs an absolute URL: your own app, not CelerSearch.\nconst { searchClient } = instantMeiliSearch(\n  `${process.env.NEXT_PUBLIC_SITE_URL}/api/search`,\n  '', // No key in the browser; the route handler adds it.\n)\n\nexport function SearchUI() {\n  return (\n    \u003CInstantSearch indexName=\"movies\" searchClient={searchClient}>\n      \u003CSearchBox placeholder=\"Search movies\" />\n      \u003CHits hitComponent={({ hit }) => \u003Cp>{String(hit.title)}\u003C/p>} />\n    \u003C/InstantSearch>\n  )\n}\n","app/search/instant/search-ui.tsx",[47,954,955,960,964,976,988,992,997,1016,1037,1048,1053,1057,1069,1075,1098,1114,1155,1163,1167],{"__ignoreMap":45},[50,956,957],{"class":52,"line":53},[50,958,959],{"class":60},"'use client'\n",[50,961,962],{"class":52,"line":109},[50,963,156],{"emptyLinePlaceholder":155},[50,965,966,968,971,973],{"class":52,"line":159},[50,967,141],{"class":102},[50,969,970],{"class":98}," { instantMeiliSearch } ",[50,972,147],{"class":102},[50,974,975],{"class":60}," '@meilisearch/instant-meilisearch'\n",[50,977,978,980,983,985],{"class":52,"line":184},[50,979,141],{"class":102},[50,981,982],{"class":98}," { Hits, InstantSearch, SearchBox } ",[50,984,147],{"class":102},[50,986,987],{"class":60}," 'react-instantsearch'\n",[50,989,990],{"class":52,"line":198},[50,991,156],{"emptyLinePlaceholder":155},[50,993,994],{"class":52,"line":210},[50,995,996],{"class":615},"// The SDK needs an absolute URL: your own app, not CelerSearch.\n",[50,998,999,1001,1003,1006,1008,1010,1013],{"class":52,"line":316},[50,1000,621],{"class":102},[50,1002,328],{"class":98},[50,1004,1005],{"class":168},"searchClient",[50,1007,338],{"class":98},[50,1009,103],{"class":102},[50,1011,1012],{"class":56}," instantMeiliSearch",[50,1014,1015],{"class":98},"(\n",[50,1017,1018,1021,1023,1025,1027,1029,1032,1035],{"class":52,"line":322},[50,1019,1020],{"class":60},"  `${",[50,1022,825],{"class":98},[50,1024,225],{"class":60},[50,1026,830],{"class":98},[50,1028,225],{"class":60},[50,1030,1031],{"class":168},"NEXT_PUBLIC_SITE_URL",[50,1033,1034],{"class":60},"}/api/search`",[50,1036,195],{"class":98},[50,1038,1039,1042,1045],{"class":52,"line":349},[50,1040,1041],{"class":60},"  ''",[50,1043,1044],{"class":98},", ",[50,1046,1047],{"class":615},"// No key in the browser; the route handler adds it.\n",[50,1049,1050],{"class":52,"line":392},[50,1051,1052],{"class":98},")\n",[50,1054,1055],{"class":52,"line":397},[50,1056,156],{"emptyLinePlaceholder":155},[50,1058,1059,1061,1063,1066],{"class":52,"line":406},[50,1060,162],{"class":102},[50,1062,266],{"class":102},[50,1064,1065],{"class":56}," SearchUI",[50,1067,1068],{"class":98},"() {\n",[50,1070,1071,1073],{"class":52,"line":419},[50,1072,400],{"class":102},[50,1074,403],{"class":98},[50,1076,1077,1079,1082,1085,1087,1090,1093,1095],{"class":52,"line":430},[50,1078,409],{"class":98},[50,1080,1081],{"class":168},"InstantSearch",[50,1083,1084],{"class":56}," indexName",[50,1086,103],{"class":102},[50,1088,1089],{"class":60},"\"movies\"",[50,1091,1092],{"class":56}," searchClient",[50,1094,103],{"class":102},[50,1096,1097],{"class":98},"{searchClient}>\n",[50,1099,1100,1102,1105,1108,1110,1112],{"class":52,"line":466},[50,1101,422],{"class":98},[50,1103,1104],{"class":168},"SearchBox",[50,1106,1107],{"class":56}," placeholder",[50,1109,103],{"class":102},[50,1111,460],{"class":60},[50,1113,463],{"class":98},[50,1115,1116,1118,1121,1124,1126,1129,1131,1134,1136,1139,1141,1144,1147,1150,1152],{"class":52,"line":476},[50,1117,422],{"class":98},[50,1119,1120],{"class":168},"Hits",[50,1122,1123],{"class":56}," hitComponent",[50,1125,103],{"class":102},[50,1127,1128],{"class":98},"{({ ",[50,1130,497],{"class":276},[50,1132,1133],{"class":98}," }) ",[50,1135,503],{"class":102},[50,1137,1138],{"class":98}," \u003C",[50,1140,14],{"class":412},[50,1142,1143],{"class":98},">{",[50,1145,1146],{"class":56},"String",[50,1148,1149],{"class":98},"(hit.title)}\u003C/",[50,1151,14],{"class":412},[50,1153,1154],{"class":98},">} />\n",[50,1156,1157,1159,1161],{"class":52,"line":485},[50,1158,546],{"class":98},[50,1160,1081],{"class":168},[50,1162,416],{"class":98},[50,1164,1165],{"class":52,"line":508},[50,1166,556],{"class":98},[50,1168,1169],{"class":52,"line":528},[50,1170,562],{"class":98},[14,1172,1173,1174,1176,1177,1180,1181,1184],{},"Set ",[47,1175,1031],{}," to your app's own origin, for example\n",[47,1178,1179],{},"http://localhost:3000"," in development. Render ",[47,1182,1183],{},"\u003CSearchUI />"," from any page.",[14,1186,1187,1188,1191,1192,1194],{},"The route handler does the job a search-only key does elsewhere: the browser\ncan search the indexes you allow and nothing else. Anything in those indexes'\ndisplayed attributes is visible to visitors, so keep private fields out of\nthem. Using a searchable ",[47,1189,1190],{},"RefinementList","? Add a second handler that forwards\n",[47,1193,586],{}," with the same index check.",[35,1196,1198],{"id":1197},"next-steps","Next steps",[18,1200,1201,1206,1213],{},[21,1202,1203,1205],{},[81,1204,220],{"href":219},": SDK basics, platform responses and limits",[21,1207,1208,1212],{},[81,1209,1211],{"href":1210},"/docs/cloud/migrate","Migrate to CelerSearch",": move an existing index from another Meilisearch",[21,1214,1215,1219],{},[81,1216,1218],{"href":1217},"/pricing","Pricing",": plans by document count, with unlimited searches",[1221,1222,1223],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":45,"searchDepth":109,"depth":109,"links":1225},[1226,1227,1228,1229],{"id":37,"depth":109,"text":38},{"id":228,"depth":109,"text":229},{"id":572,"depth":109,"text":573},{"id":1197,"depth":109,"text":1198},"Search a managed CelerSearch instance from Next.js. Query it in Server Components, or build an instant search UI with React InstantSearch through a small route handler that keeps your API key on the server.","md",{},"/docs/cloud/frameworks/nextjs",{"title":5,"description":1230},"Add search to a Next.js App Router app with a managed Meilisearch instance. Server Component search plus React InstantSearch through a secure route handler.","Next.js Search with Managed Meilisearch",{"loc":1233},"docs/cloud/frameworks/nextjs","x1f-HPj3hV4nYwO3qvmVqdE0O7YTL7GMbFdwBJzeTrE",1792316274332]