Vercel deployment not showing fs files

Answered

Giant panda posted this in #help-forum

Giant pandaOP

2023-09-29T18:29:23.000Z

Getting 404 error while fetching my files

Answered by Giant panda

okay i figured it out : so as in the screenshot the route /posts is not statically generated but fetched at runtime from server as a lambda , so it works fine , but the [id] pages are statically rendered and thus can't use session and stuff coz that's in cookies so basically can't use static generation when i am using sessions. Prolly that static generation thing is for very specific use-cases where we want to deliver static content to everyone.

View full answer

70 Replies

Giant pandaOP

2023-09-29T18:30:17.000Z

so i have a /posts route which reads all .md files

working perfectly fine

but for dynamic route , when i access that individual route say /posts/oauth-blog

then it bugs out

import { getPostsById, getPostsIds } from "@/utils/posts";

export const generateStaticParams = async () => {
  const fileIds = await getPostsIds();
  return fileIds.map((id) => {
    id;
  });
};

const Home = async ({ params }: { params: { id: string } }) => {
  const { id } = params;
  const blogData: any = await getPostsById(id);
  return (
    <div className="prose dark:prose-invert m-auto">
      <div className="text-center p-10">
        <div>
          <h1>{blogData.title}</h1>
        </div>
        <div>Created on ({blogData.date})</div>
      </div>
      <article>
        <div dangerouslySetInnerHTML={{ __html: blogData.contentHtml }} />
      </article>
    </div>
  );
};

export default Home;

this is my /posts/[id]/pages.tsx code

Clown

2023-09-29T18:32:39.000Z

Where is the handler

Giant pandaOP

2023-09-29T18:32:51.000Z

import path from "path";
import { readdir, readFile } from "fs/promises";
import matter from "gray-matter";
import { remark } from "remark";
import html from "remark-html";

export interface PostsMetadata {
  id: string;
  date?: string;
  title?: string;
  about?: string;
}

export const getPostsIds = async () => {
  const postsDirectory = path.join(process.cwd(), "posts");
  const fileNames = await readdir(postsDirectory);

  return fileNames.map((fileName) => fileName.replace(/\.md$/, ""));
};

export const getSortedPostsData = async (): Promise<PostsMetadata[]> => {
  const postsDirectory = path.join(process.cwd(), "posts");
  const fileNames = await readdir(postsDirectory);

  const allPostsData = await Promise.all(
    fileNames.map(async (fileName) => {
      const id = fileName.replace(/\.md$/, "");

      const fullPath = path.join(postsDirectory, fileName);
      const fileContents = await readFile(fullPath, "utf-8");

      const matterResult = matter(fileContents);

      return {
        id,
        ...matterResult.data,
      };
    })
  );

  return allPostsData.sort((a: any, b: any) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
};

export const getPostsById = async (id: string) => {
  const fullPath = path.join(process.cwd(), "posts", `${id}.md`);
  const fileContents = await readFile(fullPath);

  const matterResult = matter(fileContents);

  const processedContents = await remark()
    .use(html)
    .process(matterResult.content)
  
  const contentHtml = processedContents.toString();
  
  return {
    id,
    contentHtml,
    ...matterResult.data
  }
};

this is the full util file

here allPostsData is working fine , but getPostsById is not working fine

and both operate on same files

so it's not the issue with the files

something is off with static generation of [id] pages

build logs

oh lol figured it out

Clown

2023-09-29T18:37:21.000Z

Giant pandaOP

2023-09-29T18:38:10.000Z

the error log :

Page changed from static to dynamic at runtime /posts/oauth-blog, reason: headers
see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error
    at s (/var/task/.next/server/chunks/154.js:30:28531)
    at u (/var/task/.next/server/chunks/154.js:30:25998)
    at s (/var/task/.next/server/chunks/154.js:30:19935)
    at v (/var/task/.next/server/chunks/231.js:1:1990)
    at we (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:262655)
    at /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:273539
    at Object.toJSON (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:276836)
    at stringify (<anonymous>)
    at Oe (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:265286)
    at Me (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:265817) {
  page: '/posts/oauth-blog'
}
Page changed from static to dynamic at runtime /posts/oauth-blog, reason: headers
see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error
    at s (/var/task/.next/server/chunks/154.js:30:28531)
    at u (/var/task/.next/server/chunks/154.js:30:25998)
    at s (/var/task/.next/server/chunks/154.js:30:19935)
    at v (/var/task/.next/server/chunks/231.js:1:1990)
    at we (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:262655)
    at /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:273539
    at Object.toJSON (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:276836)
    at stringify (<anonymous>)
    at Oe (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:265286)
    at Me (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:265817) {
  page: '/posts/oauth-blog'
}
Error: Runtime exited with error: exit status 1
Runtime.ExitError

https://nextjs.org/docs/messages/app-static-to-dynamic-error

Clown

2023-09-29T18:39:34.000Z

Welp

Giant pandaOP

2023-09-29T18:39:41.000Z

but i am still not sure why page turned dynamic from static

Clown

2023-09-29T18:39:47.000Z

Logs had all the answer

Giant pandaOP

2023-09-29T18:40:39.000Z

this is my [id] page

import { getPostsById, getPostsIds } from "@/utils/posts";

export const generateStaticParams = async () => {
  const fileIds = await getPostsIds();
  return fileIds.map((id) => {
    id;
  });
};

const Home = async ({ params }: { params: { id: string } }) => {
  const { id } = params;
  const blogData: any = await getPostsById(id);
  return (
    <div className="prose dark:prose-invert m-auto">
      <div className="text-center p-10">
        <div>
          <h1>{blogData.title}</h1>
        </div>
        <div>Created on ({blogData.date})</div>
      </div>
      <article>
        <div dangerouslySetInnerHTML={{ __html: blogData.contentHtml }} />
      </article>
    </div>
  );
};

export default Home;

so nothing here which should dynamically change , all pages should be statically build and run

Page changed from static to dynamic at runtime /posts/oauth-blog, reason: headers

Clown

2023-09-29T18:42:17.000Z

I dont think it can do fs read at runtime

Without going dynamic

Giant pandaOP

2023-09-29T18:42:32.000Z

no my other page does

and works totally fine

Clown

2023-09-29T18:43:01.000Z

Does it also use staticParams?

Giant pandaOP

2023-09-29T18:43:29.000Z

no but it's not a dynamic route

so it statically renders by default

Clown

2023-09-29T18:43:50.000Z

Wait wut?

Giant pandaOP

2023-09-29T18:44:22.000Z

import { getSortedPostsData } from "@/utils/posts";
import { BlogTile } from "../components/BlogTile";

const Home = async () => {
  const allPostsData = await getSortedPostsData();
  return (
    <div className="h-full flex flex-col space-y-20">
      <div className="text-center text-5xl">All Blogs</div>
      <div className="grid grid-flow-row gap-5 decoration-0 grid-cols-4 h-full grid-rows-3">
        {allPostsData.map(({ id, date, title, about }) => (
          <BlogTile key={id} id={id} title={title} date={date} about={about} />
        ))}
      </div>
    </div>
  );
};

export default Home;

this page is /posts

it's not a dynamic route like [id]/pages.tsx

so it statically renders by default

and is working fine

or am i confusing statically rendering with prerendering + caching ?

let me remove generateStaticParams and try if issue resolves

ok removing it worked

but joulev said that they both statically render

Clown

2023-09-29T18:48:22.000Z

Well duh, but are u using headers somewhere

Giant pandaOP

2023-09-29T18:48:23.000Z

so why generateStaticParams is problem ?

Clown

2023-09-29T18:48:33.000Z

its not the main problem

Thing is, if you dont use generateStaticParams it wont be static, it will be dynamic.

But something is forcing it to be dynamic at runtime.

Giant pandaOP

2023-09-29T18:49:24.000Z

hmm true

Clown

2023-09-29T18:49:41.000Z

anyways, using headers somewhere?

Giant pandaOP

2023-09-29T18:49:50.000Z

it does have a layout file as well

import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { ReactNode } from "react";
import Link from "next/link";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <div>
      {children}
      <div className="p-10">
        <Link href="/posts">
          <ArrowBackIcon /> Go Back to Posts
        </Link>
      </div>
    </div>
  );
}

can this be problem ?

Clown

2023-09-29T18:50:27.000Z

Dont think so

Giant pandaOP

2023-09-29T18:50:41.000Z

these are the only 2 files that are local to this route

Clown

2023-09-29T18:50:42.000Z

Its saying its due to headers () so its either tripping or we both are

Giant pandaOP

2023-09-29T18:50:57.000Z

prolly the 2nd ðŸ¤£

Clown

2023-09-29T18:51:04.000Z

What about the root layout?

Yeah well probably the latter(monkee brain)

Giant pandaOP

2023-09-29T18:51:23.000Z

that shouldn't be problem coz /posts is rendering fine ?

my root layout uses sessions but that shouldn't be a problem anyways right ?

coz it just takes children and displays them

Clown

2023-09-29T18:52:50.000Z

I honestly dont know but maybe

Its too late rn for my brain to work. So i guess I'll have to leave it you ðŸ˜

Giant pandaOP

2023-09-29T18:53:31.000Z

i'll update here if i find something

thanks for your help

Giant pandaOP

2023-09-29T19:08:09.000Z

Answer

Giant pandaOP

2023-09-29T19:10:42.000Z

and this is pretty logical too , if it was static no way we can validate a user so anyone can acces that route