Lookatallthatspace Posts

Lookatallthatspace

•Created by Lookatallthatspace on 8/14/2024 in #❓-help

404 on vercel deployment

Hi everyone, I'm working on a Next.js project called Codeshares and I'm encountering a 404 page with no errors when I deploy my application on vercel. The app works fine in development, but fails on deployment. I suspect the issue might be related to my routing since index is supposed to be the root page. I have some logs that seem off:

   Generating static pages (1/6) 
   Generating static pages (2/6) 
   Generating static pages (4/6) 
 ✓ Generating static pages (6/6)
   Finalizing page optimization ...
   Collecting build traces ...
Route (app)                              Size     First Load JS
┌ ○ /_not-found                          871 B          87.9 kB
├ ○ /pages/auth/login/pages              1.35 kB         120 kB
├ ○ /pages/auth/signup/pages             1.81 kB         120 kB
└ ○ /pages/discover-startups/pages       1.34 kB          96 kB
+ First Load JS shared by all            87 kB
  ├ chunks/23-68e9e1832343a790.js        31.4 kB
  ├ chunks/fd9d1056-108dc8d82e5cf6a5.js  53.6 kB
  └ other shared chunks (total)          1.95 kB

   Generating static pages (1/6) 
   Generating static pages (2/6) 
   Generating static pages (4/6) 
 ✓ Generating static pages (6/6)
   Finalizing page optimization ...
   Collecting build traces ...
Route (app)                              Size     First Load JS
┌ ○ /_not-found                          871 B          87.9 kB
├ ○ /pages/auth/login/pages              1.35 kB         120 kB
├ ○ /pages/auth/signup/pages             1.81 kB         120 kB
└ ○ /pages/discover-startups/pages       1.34 kB          96 kB
+ First Load JS shared by all            87 kB
  ├ chunks/23-68e9e1832343a790.js        31.4 kB
  ├ chunks/fd9d1056-108dc8d82e5cf6a5.js  53.6 kB
  └ other shared chunks (total)          1.95 kB

I'm using Next.js 13 with the App Router, and I've set up tRPC for API calls. The project structure follows the recommended Next.js layout, but I'm not sure if I'm missing something in the configuration that's causing the 404 error on deployment. Here are the relevant parts of my key files: app/pages/_app.tsx:

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { trpc } from '@/utils/trpc/trpc'
import "../globals.css"

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)
  return getLayout(<Component {...pageProps} />)
}

export default trpc.withTRPC(MyApp)

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { trpc } from '@/utils/trpc/trpc'
import "../globals.css"

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)
  return getLayout(<Component {...pageProps} />)
}

export default trpc.withTRPC(MyApp)

app/pages/layout.tsx:

import "./globals.css"
import { Inter } from "next/font/google"
import Head from 'next/head'
import dynamic from 'next/dynamic'

const inter = Inter({ subsets: ["latin"] })

const Navigation = dynamic(() => import('@/app/pages/components/Navigation'), {
  ssr: false,
})

const Home = dynamic(() => import('@/app/pages/components/Home'), {
  ssr: false,
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <Head>
        <title>Codeshares</title>
        <meta name="description" content="Connect startup entrepreneurs with developers and engineers for equity-based projects" />
      </Head>
      <body className={`flex flex-col min-h-screen ${inter.className}`}>
        <Navigation />
        <main className="flex-grow">
          {children}
          <Home />
        </main>
        <footer className="bg-[#4c88ef] text-white p-4 text-center">
          <p>&copy; 2024 Codeshares. All rights reserved.</p>
        </footer>
      </body>
    </html>
  )
}

import "./globals.css"
import { Inter } from "next/font/google"
import Head from 'next/head'
import dynamic from 'next/dynamic'

const inter = Inter({ subsets: ["latin"] })

const Navigation = dynamic(() => import('@/app/pages/components/Navigation'), {
  ssr: false,
})

const Home = dynamic(() => import('@/app/pages/components/Home'), {
  ssr: false,
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <Head>
        <title>Codeshares</title>
        <meta name="description" content="Connect startup entrepreneurs with developers and engineers for equity-based projects" />
      </Head>
      <body className={`flex flex-col min-h-screen ${inter.className}`}>
        <Navigation />
        <main className="flex-grow">
          {children}
          <Home />
        </main>
        <footer className="bg-[#4c88ef] text-white p-4 text-center">
          <p>&copy; 2024 Codeshares. All rights reserved.</p>
        </footer>
      </body>
    </html>
  )
}

app/pages/index.tsx:

import type { ReactElement } from 'react'
import RootLayout from './layout'
import type { NextPageWithLayout } from './_app'

const Page: NextPageWithLayout = () => {
  return (
    <div className="flex flex-col items-center justify-center py-2">
      <h1 className="text-6xl font-bold mb-6">
        Welcome to <a className="text-blue-600" href="https://nextjs.org">Codeshares</a>
      </h1>
      <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
        {/* Your existing content here */}
      </div>
    </div>
  )
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <RootLayout>
      {page}
    </RootLayout>
  )
}

export default Page

import type { ReactElement } from 'react'
import RootLayout from './layout'
import type { NextPageWithLayout } from './_app'

const Page: NextPageWithLayout = () => {
  return (
    <div className="flex flex-col items-center justify-center py-2">
      <h1 className="text-6xl font-bold mb-6">
        Welcome to <a className="text-blue-600" href="https://nextjs.org">Codeshares</a>
      </h1>
      <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
        {/* Your existing content here */}
      </div>
    </div>
  )
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <RootLayout>
      {page}
    </RootLayout>
  )
}

export default Page

Has anyone encountered a similar issue or can spot what might be causing this problem? Any help or suggestions would be greatly appreciated! Thank you in advance!

1 replies