Unable to utilize getServerSideProps with AppRouter in Next.js due to an error stating that getServerSideProps is not supported in the app/ directory.
The Solutions:
Solution 1: Using AppRouter
When using AppRouter, you cannot use `getServerSideProps`. Instead, refer to the documentation to explore alternative methods of fetching data within components located in the app directory.
Solution 2: Move the Server-Side Component to `/pages` Folder
The `getServerSideProps` function can only be used within components located in the `/pages` directory. Move your server-side component into this folder to enable its proper execution by NextJS.
Q&A
If I tried to copy/paste the official examples from NextJS for getServerSideProps, it threw the following error: getServerSideProps is not supported in app/. Why?
—
You can’t use getServerSideProps if you’re using the app router.
Since I can’t use getServerSideProps with the app router, how can I fetch the data with components in the app directory?
The following video, titled "I Fixed Next.js Server Actions - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.
Next.js Server Actions have been a long time coming, so happy we can finally talk about them!
