How can I build pages without calling the API?

Answered

Swyftey posted this in #help-forum

2024-08-23T13:23:03.367Z

Hi.

I am using Next.Js version 13+ ('/app' directory) and would like to know if I can build my project without it using the API (server-side)? I'd only like the API to be used when the project is running or on 'request time' I think.

Thanks for any assistance.

Answered by @ts-ignore

https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic

View full answer

10 Replies

@Swyftey Hi. I am using Next.Js version 13+ ('/app' directory) and would like to know if I can build my project without it using the API (server-side)? I'd only like the API to be used when the project is running or on 'request time' I think. Thanks for any assistance.

B33fb0n3

2024-08-23T13:28:33.922Z

you can make your site fully dynamic and then the page only request your DB (backend/api) when the user requests your page

@B33fb0n3 you can make your site fully dynamic and then the page only request your DB (backend/api) when the user requests your page

SwyfteyOP

2024-08-23T13:32:50.745Z

I see. Is there a chance you can show me a simple example of how to make it "fully dymamic"?

This is basically what I have right now, and it requires the API when I build:

const fetchData = () => {}); // Fetch Data

const ProfilePage = async () => {}); // Call fetchData in here

export default ProfilePage;

This would be in the "page.tsx" file.

app -> profile -> page.tsx

@Swyftey I see. Is there a chance you can show me a simple example of how to make it "fully dymamic"? This is basically what I have right now, and it requires the API when I build: js const fetchData = () => {}); // Fetch Data const ProfilePage = async () => {}); // Call fetchData in here export default ProfilePage;

@ts-ignore

2024-08-23T13:40:04.190Z

export const dyamic = "force-dynamic";
export default async function ProfilePage({params}:{params:{id:string}}){
  const profile = await db.query(`SELECT * FROM users where id=${params.id}`);
  if(!profile) return notFound()
  return <>Profile Page</>
}