Here I'm working on a e-commerce application built using next.js. In that I'm implementing Typesense instant search functionality. Before the implementation of typesense instant search functionality the application was working fine. But after the implementation of the typesense function the application is not responding accordingly. On the home page where every product appears and when I click on that product then in order for the product to appear I need to reload that page. Other wise that product is not appearing and only blank screen is visible. Please help me with this issue
//app/layout.tsx
'use client'
import Navbar from 'components/layout/navbar';
import { Inter } from 'next/font/google';
import { ReactNode, Suspense } from 'react';
import './globals.css';
import ProductsPage from "components/products/index";
import { ThreeItemGridItem } from 'components/products';
import {
InstantSearch,
Configure,
Hits,
Pagination,
InfiniteHits
} from 'react-instantsearch-dom';
import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter';
const TYPESENSE_SERVER_CONFIG = {
apiKey: 'exceloid-test',
nodes: [
{
host: '95.216.171.30',
port: 8108,
protocol: 'http',
},
],
};
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
server: TYPESENSE_SERVER_CONFIG,
additionalSearchParameters: {
query_by: 'title,description',
num_typos: 1,
typo_tokens_threshold: 1,
},
});
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
export const metadata = {
// metadataBase: new URL(baseUrl),
title: {
default: SITE_NAME!,
template: `%s | ${SITE_NAME}`
},
robots: {
follow: true,
index: true
},
...(TWITTER_CREATOR &&
TWITTER_SITE && {
twitter: {
card: 'summary_large_image',
creator: TWITTER_CREATOR,
site: TWITTER_SITE
}
})
};
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter'
});
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text- white dark:selection:bg-pink-500 dark:selection:text-white">
<InstantSearch indexName="Products" searchClient={typesenseInstantsearchAdapter.searchClient}>
<Navbar />
</InstantSearch>
<Suspense>
<main>{children}</main>
</Suspense>
</body>
</html>
);
}
//app/page.tsx
'use client'
import { Carousel } from 'components/carousel';
import Footer from 'components/layout/footer';
import ProductsPage from "components/products/index";
import { Suspense } from 'react';
import { Inter } from 'next/font/google';
import './globals.css';
import { ThreeItemGridItem } from 'components/products';
import Navbar from 'components/layout/navbar';
import {
InstantSearch,
Configure,
Hits,
Pagination,
InfiniteHits
} from 'react-instantsearch-dom';
import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter';
const TYPESENSE_SERVER_CONFIG = {
apiKey: 'exceloid-test',
nodes: [
{
host: '95.216.171.30',
port: 8108,
protocol: 'http',
},
],
};
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
server: TYPESENSE_SERVER_CONFIG,
additionalSearchParameters: {
query_by: 'title,description',
num_typos: 1,
typo_tokens_threshold: 1,
},
});
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
: 'http://localhost:3000';
export const metadata = {
metadataBase: new URL(baseUrl),
title: {
default: SITE_NAME!,
template: `%s | ${SITE_NAME}`
},
robots: {
follow: true,
index: true
},
...(TWITTER_CREATOR &&
TWITTER_SITE && {
twitter: {
card: 'summary_large_image',
creator: TWITTER_CREATOR,
site: TWITTER_SITE
}
})
};
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter'
});
export default async function HomePage() {
return (
<html lang="en" className={inter.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<InstantSearch indexName="Products" searchClient={typesenseInstantsearchAdapter.searchClient}>
<Navbar />
</InstantSearch>
<InstantSearch indexName="Products" searchClient={typesenseInstantsearchAdapter.searchClient}>
<Hits hitComponent={({ hit }: { hit: any }) => <ThreeItemGridItem item={hit} size="half" priority={true} />} />
<Configure hitsPerPage={100} />
<Pagination />
</InstantSearch>
{/* <ProductsPage /> */}
<Suspense>
<Carousel />
<Suspense>
<Footer />
</Suspense>
</Suspense>
</body>
</html>
);
}
what I'm expecting is that when I click on the particular product then that product should appear on the new page along with the navbar without reload. But what's happening is when I click on a particular product then the product is only being visible if I reload the page. It's happening same in case of navbar also. On the home page both navbar and products are being displayed.