migrate to next.js v15 (#393)

.gitignore

@@ -2,8 +2,10 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
 
 # testing
 /coverage

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

app/api/from/base64/[base64]/route.ts

@@ -4,9 +4,9 @@ import { cleanDomain } from '@/lib/domain';
 
 export async function GET(
   request: Request,
-  context: { params: { base64: string } }
+  context: { params: Promise<{ base64: string }> }
 ) {
-  const base64 = context.params.base64;
+  const { base64 } = await context.params;
 
   if (!base64) {
     return NextResponse.json(

app/lookup/[domain]/(overview)/page.tsx

@@ -20,14 +20,15 @@ import DomainNotRegistered from '../../../../components/DomainNotRegistered';
 export const fetchCache = 'default-no-store';
 
 interface LookupDomainProps {
-  params: {
+  params: Promise<{
     domain: string;
-  };
+  }>;
 }
 
-export const generateMetadata = ({
-  params: { domain },
-}: LookupDomainProps): Metadata => {
+export const generateMetadata = async ({
+  params: params,
+}: LookupDomainProps): Promise<Metadata> => {
+  const { domain } = await params;
   return {
     openGraph: {
       url: `/lookup/${domain}`,
@@ -39,8 +40,9 @@ export const generateMetadata = ({
 };
 
 const LookupDomain: FC<LookupDomainProps> = async ({
-  params: { domain },
+  params: params,
 }): Promise<ReactElement> => {
+  const { domain } = await params;
   const baseDomain = getDomain(domain);
   const publicSuffix = getPublicSuffix(domain);
 

app/lookup/[domain]/certs/page.tsx

@@ -35,19 +35,19 @@ type CertsData = {
   serial_number: string;
 }[];
 
-export const runtime = 'edge';
-export const preferredRegion = 'lhr1';
-
-export const generateMetadata = ({
-  params: { domain },
-}: CertsResultsPageProps): Metadata => ({
-  openGraph: {
-    url: `/lookup/${domain}/certs`,
-  },
-  alternates: {
-    canonical: `/lookup/${domain}/certs`,
-  },
-});
+export const generateMetadata = async ({
+  params: params,
+}: CertsResultsPageProps): Promise<Metadata> => {
+  const { domain } = await params;
+  return {
+    openGraph: {
+      url: `/lookup/${domain}/certs`,
+    },
+    alternates: {
+      canonical: `/lookup/${domain}/certs`,
+    },
+  };
+};
 
 const lookupCerts = async (domain: string): Promise<CertsData> => {
   const response = await fetch(
@@ -71,15 +71,18 @@ const lookupCerts = async (domain: string): Promise<CertsData> => {
 };
 
 type CertsResultsPageProps = {
-  params: {
+  params: Promise<{
     domain: string;
-  };
+  }>;
 };
 
 const CertsResultsPage: FC<CertsResultsPageProps> = async ({
-  params: { domain },
+  params: params,
 }): Promise<ReactElement> => {
-  const userAgent = headers().get('user-agent');
+  const { domain } = await params;
+  const header = await headers();
+
+  const userAgent = header.get('user-agent');
   const isBotRequest = !userAgent || isbot(userAgent);
 
   if (isBotRequest) {

app/lookup/[domain]/dns/_components/GeoDnsCheck.tsx

@@ -16,7 +16,8 @@ interface Props {
 export const GeoDnsCheck: FC<Props> = async ({
   domain,
 }): Promise<ReactElement> => {
-  const userAgent = headers().get('user-agent');
+  const header = await headers();
+  const userAgent = header.get('user-agent');
   const isBotRequest = !userAgent || isbot(userAgent);
 
   if (isBotRequest) return <></>;

app/lookup/[domain]/dns/page.tsx

@@ -46,25 +46,27 @@ const getResolver = (
 };
 
 type LookupDomainProps = {
-  params: {
+  params: Promise<{
     domain: string;
-  };
-  searchParams: {
+  }>;
+  searchParams: Promise<{
     resolver?: string;
     location?: string;
-  };
+  }>;
 };
 
 export const fetchCache = 'default-no-store';
 
-export const generateMetadata = ({
-  params: { domain },
-  searchParams: { resolver, location },
-}: LookupDomainProps): Metadata => {
-  const params = new URLSearchParams();
-  if (resolver) params.set('resolver', resolver);
-  if (location) params.set('location', location);
-  const search = params.size ? `?${params.toString()}` : '';
+export const generateMetadata = async ({
+  params: params,
+  searchParams: searchParams,
+}: LookupDomainProps): Promise<Metadata> => {
+  const { domain } = await params;
+  const { resolver, location } = await searchParams;
+  const URLsearchParams = new URLSearchParams();
+  if (resolver) URLsearchParams.set('resolver', resolver);
+  if (location) URLsearchParams.set('location', location);
+  const search = URLsearchParams.size ? `?${URLsearchParams.toString()}` : '';
 
   return {
     openGraph: {
@@ -77,17 +79,20 @@ export const generateMetadata = ({
 };
 
 const LookupDomain: FC<LookupDomainProps> = async ({
-  params: { domain },
-  searchParams: { resolver: resolverName, location: locationName },
+  params: params,
+  searchParams: searchParams,
 }): Promise<ReactElement> => {
-  if (locationName && !resolverName) {
+  const { domain } = await params;
+  const { resolver: resolverData, location } = await searchParams;
+
+  if (location && !resolverData) {
     return redirect(
       `/lookup/${encodeURIComponent(domain)}/dns`,
       RedirectType.replace
     );
   }
 
-  const resolver = getResolver(resolverName, locationName);
+  const resolver = getResolver(resolverData, location);
   const records = await resolver.resolveAllRecords(domain);
   const ipsInfo = await getIpsInfo(
     records.A.map((r) => r.data).concat(records.AAAA.map((r) => r.data))
@@ -106,15 +111,12 @@ const LookupDomain: FC<LookupDomainProps> = async ({
     <>
       <div className="flex flex-col justify-between gap-4 sm:flex-row">
         <div className="flex flex-col gap-4 sm:flex-row sm:gap-8">
-          <ResolverSelector initialValue={resolverName} />
-          <LocationSelector
-            initialValue={locationName}
-            disabled={!resolverName}
-          />
+          <ResolverSelector initialValue={resolverData} />
+          <LocationSelector initialValue={location} disabled={!resolverData} />
         </div>
         <div className="flex flex-col gap-2 sm:gap-4 md:flex-row">
-          {resolverName === 'google' && <FlushGoogleDnsCacheButton />}
-          {resolverName === 'cloudflare' && <FlushCloudflareDnsCacheButton />}
+          {resolverData === 'google' && <FlushGoogleDnsCacheButton />}
+          {resolverData === 'cloudflare' && <FlushCloudflareDnsCacheButton />}
           <DnsHistoryButton domain={domain} />
         </div>
       </div>

app/lookup/[domain]/layout.tsx

@@ -13,26 +13,31 @@ import SearchForm from '@/components/SearchForm';
 
 type LookupLayoutProps = {
   children: ReactNode;
-  params: {
+  params: Promise<{
     domain: string;
-  };
+  }>;
 };
 
-export const generateMetadata = ({
-  params: { domain },
-}: LookupLayoutProps): Metadata => ({
-  title: `Results for ${domain} · digga`,
-  openGraph: {
-    type: 'website',
-    title: `Results for ${domain} · digga`,
-    description: `Find DNS records, WHOIS data, SSL/TLS certificate history and more for ${domain}`,
-  },
-});
+export const generateMetadata = async ({
+  params: params,
+}: LookupLayoutProps): Promise<Metadata> => {
+  const propParams = await params;
+
+  return {
+    title: `Results for ${propParams.domain} · digga`,
+    openGraph: {
+      type: 'website',
+      title: `Results for ${propParams.domain} · digga`,
+      description: `Find DNS records, WHOIS data, SSL/TLS certificate history and more for ${propParams.domain}`,
+    },
+  };
+};
 
-const LookupLayout: FC<LookupLayoutProps> = ({
+const LookupLayout: FC<LookupLayoutProps> = async ({
   children,
-  params: { domain },
-}): ReactElement => {
+  params: params,
+}): Promise<ReactElement> => {
+  const { domain } = await params;
   if (!isValidDomain(domain)) {
     return notFound();
   }

app/lookup/[domain]/opengraph-image.tsx

@@ -18,8 +18,9 @@ const kanitRegularFontP = fetch(
 export const handler = async ({
   params,
 }: {
-  params: { domain: string };
+  params: Promise<{ domain: string }>;
 }): Promise<ImageResponse> => {
+  const { domain } = await params;
   const [interRegularFont, interBoldFont, kanitRegularFont] = await Promise.all(
     [interRegularFontP, interBoldFontP, kanitRegularFontP]
   );
@@ -49,7 +50,7 @@ export const handler = async ({
           digga
         </span>
         <span style={{ fontSize: 48, fontWeight: 700 }}>
-          Results for {params.domain}
+          Results for {domain}
         </span>
         <span
           style={{

app/lookup/[domain]/whois/page.tsx

@@ -6,16 +6,19 @@ import whoiser, { type WhoisSearchResult } from 'whoiser';
 import StyledError from '@/components/StyledError';
 import { getBaseDomain, getTLD } from '@/lib/utils';
 
-export const generateMetadata = ({
-  params: { domain },
-}: WhoisResultsPageProps): Metadata => ({
-  openGraph: {
-    url: `/lookup/${domain}/whois`,
-  },
-  alternates: {
-    canonical: `/lookup/${domain}/whois`,
-  },
-});
+export const generateMetadata = async ({
+  params: params,
+}: WhoisResultsPageProps): Promise<Metadata> => {
+  const { domain } = await params;
+  return {
+    openGraph: {
+      url: `/lookup/${domain}/whois`,
+    },
+    alternates: {
+      canonical: `/lookup/${domain}/whois`,
+    },
+  };
+};
 
 const lookupWhois = async (domain: string) => {
   const result = await whoiser(domain, {
@@ -32,14 +35,15 @@ const lookupWhois = async (domain: string) => {
 };
 
 type WhoisResultsPageProps = {
-  params: {
+  params: Promise<{
     domain: string;
-  };
+  }>;
 };
 
 const WhoisResultsPage: FC<WhoisResultsPageProps> = async ({
-  params: { domain },
+  params: params,
 }): Promise<ReactElement> => {
+  const { domain } = await params;
   const baseDomain = getBaseDomain(domain);
   const data = await lookupWhois(baseDomain);
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.