I am having a NextJs app using the app router and a pretty simple Layout.tsx:
import Footer from "@repo/shared/footer";
import { Analytics } from "@vercel/analytics/react";
import Head from "next/head";
import HeaderComponent from "../../_components/HeaderComponent";
import "./../../styles/styles.scss";
export default function RootLayout({
children,
params: { lang },
}: {
children: React.ReactNode;
params: { lang: string };
}) {
return (
<>
<html lang={lang}>
<Head>
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<HeaderComponent lang={lang} />
<main>{children}</main>
<Footer />
</body>
<Analytics />
</html>
</>
);
}
The HeaderComponent has “use client” and loads the content based on the current language:
async function getHeaderContent(lang: string): Promise<HeaderContent> {
const fullPath = `${process.cwd()}/src/_lib/${lang}/header-content.json`;
const fileContents = await fs.readFile(fullPath, "utf8");
return JSON.parse(fileContents);
}
This works perfectly for every page inside my app but apparently not for my header. On localhost everything is fine, but when I deploy it to vercel I am seeing the following error:
Error: ENOENT: no such file or directory, open
‘/var/task/apps/myapp/src/_lib/en/header-content.json’ at async
open (node:internal/fs/promises:636:25) at async Object.readFile
(node:internal/fs/promises:1246:14) at async v
(/var/task/apps/myapp/.next/server/chunks/165.js:1:5041) at
async g
(/var/task/apps/myapp/.next/server/chunks/165.js:1:4599) {
errno: -2, code: ‘ENOENT’, syscall: ‘open’, path:
‘/var/task/apps/myapp/src/_lib/en/header-content.json’, digest:
‘1329482108’ }
When I add the to each individual page, it works. The path is correct for 100% and the file also shows up in vercel at the correct folder location.