Next.js Discord

Discord Forum

return undefined

Answered
demonslayer posted this in #help-forum
Open in Discord
demonslayerOP
// page.jsx
import Link from "next/link";
import "./page.scss";

export const metadata = {
    title: "Blog App - News",
    description: "Blog Application",
};

export async function getServerSideProps() {
    const res = await fetch(process.env.NEXT_PUBLIC_API_URL_NEWS, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
        },
        cache: "no-store",
    });
    const news = await res.json();
    return { props: { news }}
}

const News = async ({ news }) => {
    
    console.log(news);

    return (
        <div className="news-w">
            <h1 className="heading"> Latest News </h1>
            <div className="news-item-w">
            {/* {news.map((item, index) => (
                <div className="news-card" key={item.id}>
                    <img src={item.photourl} alt="post-image" className="card-photo" />
                    <div className="info-w">
                        <div className="section">
                            <div className="date"> {item.date} | </div>
                            <div className="category"> {item.category} </div>
                        </div>
                        <h2 className="title"> {item.title} </h2>
                        <Link href={`/news/${item.id}`} className="read-more-btn">Read More</Link>
                    </div>
                </div>
            ))} */}
            </div>
        </div>
    );
};

export default News;


My console.log returns undefined. However before using "getServerSideProps" I created a function "getNews" and it was working just fine. Returning a Destructured prop is not working and im not sure why. If someone could help me I would truly appreciate.
Answered by aardani
(╯°□°)╯︵ ┻━┻
View full answer

54 Replies

aardani
are you using app dir or pages dir
demonslayerOP
app dir i believe
/** @type {import('next').NextConfig} */
const nextConfig = {
     experimental: {
        appDir: true
     }
}

module.exports = nextConfig
thats my next.config.js
aardani
theres no more getSerersideprops in app dir
demonslayerOP
Oooooo
aardani
also
appdir is no longer experimental in nextjs13
you can still continue using getserversideprops in pages dir if you wish to keep using it
demonslayerOP
Do i just call it as a function?
inside my news component?
aardani
ye
demonslayerOP
like const data = getServerSideProps()
aardani
no
like i said
no more getServerSideprops
so just call your back-end logic directly in the news server component
demonslayerOP
perfect, I tried that before and I got an error when building using vercel
import Link from "next/link";
import "./page.scss";

export const metadata = {
    title: "Blog App - News",
    description: "Blog Application",
};

async function getNews() {
    const res = await fetch(process.env.NEXT_PUBLIC_API_URL_NEWS, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
        },
        cache: "no-store",
    });

    return res.json();
}

const News = async () => {
    const news = await getNews();
    console.log(news)

    return (
        <div className="news-w">
            <h1 className="heading"> Latest News </h1>
            <div className="news-item-w">
            {news.map((item, index) => (
                <div className="news-card" key={item.id}>
                    <img src={item.photourl} alt="post-image" className="card-photo" />
                    <div className="info-w">
                        <div className="section">
                            <div className="date"> {item.date} | </div>
                            <div className="category"> {item.category} </div>
                        </div>
                        <h2 className="title"> {item.title} </h2>
                        <Link href={`/news/${item.id}`} className="read-more-btn">Read More</Link>
                    </div>
                </div>
            ))}
            </div>
        </div>
    );
};

export default News;
aardani
you don't need to use fetch again since server components resides in the server environment
demonslayerOP
so how would i do this?
aardani
what is your getNews logic?
demonslayerOP
async function getNews() {
    const res = await fetch(process.env.NEXT_PUBLIC_API_URL_NEWS, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
        },
        cache: "no-store",
    });

    return res.json();
}
aardani
is your api url outside of your next.js server?
is it an external application
demonslayerOP
its inside my next.js server, i have an api folder api / news / route.js
aardani
yeah
whats ur getNews logic
demonslayerOP
import { NextResponse } from "next/server";
import { db } from "../route";

export async function GET(resquest) {
    try {
        const connection = await db;
        const res = await connection.execute('SELECT * FROM news')
        return NextResponse.json(res[0])
    } catch (err) {
        return new Response('Connection failed!', { headers: { 'Content-Type': 'text/plain' } })
    } 
}

export async function POST(request) {
    const connection = await db;

    const { id, title, descripion, category, date, photourl } = await request.json()

    const q = `INSERT INTO news (id, title, description, category, date, photourl)
    VALUES (${connection.escape(id)}, ${connection.escape(title)}, ${connection.escape(descripion)}, ${connection.escape(category)}, ${connection.escape(date)}, ${connection.escape(photourl)})`

    try {
        await connection.query(q);
        return NextResponse.json('Data Inserted!')
    } catch (error) {
        console.error("Failed to insert data:", error);
        return NextResponse.json({ error: "Failed to insert data" });
    }
}
aardani
you can put all that GET inside server components directly
as per the build error
you need to provide more information here amigo, im not a compiler :))
demonslayerOP
TypeError: Cannot read properties of undefined (reading 'method')
    at r (/vercel/path0/.next/server/chunks/509.js:6993:29)
    at doOriginalFetch (/vercel/path0/.next/server/chunks/981.js:3136:24)
    at /vercel/path0/.next/server/chunks/981.js:3252:20
    at /vercel/path0/.next/server/chunks/981.js:3541:36
    at NoopContextManager.with (/vercel/path0/.next/server/chunks/981.js:579:30)
    at ContextAPI.with (/vercel/path0/.next/server/chunks/981.js:249:58)
    at NoopTracer.startActiveSpan (/vercel/path0/.next/server/chunks/981.js:1172:34)
    at ProxyTracer.startActiveSpan (/vercel/path0/.next/server/chunks/981.js:1212:36)
    at /vercel/path0/.next/server/chunks/981.js:3530:107
    at NoopContextManager.with (/vercel/path0/.next/server/chunks/981.js:579:30)
Error occurred prerendering page "/news". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'method')
    at r (/vercel/path0/.next/server/chunks/509.js:6993:29)
    at doOriginalFetch (/vercel/path0/.next/server/chunks/981.js:3136:24)
    at /vercel/path0/.next/server/chunks/981.js:3252:20
    at /vercel/path0/.next/server/chunks/981.js:3541:36
    at NoopContextManager.with (/vercel/path0/.next/server/chunks/981.js:579:30)
    at ContextAPI.with (/vercel/path0/.next/server/chunks/981.js:249:58)
    at NoopTracer.startActiveSpan (/vercel/path0/.next/server/chunks/981.js:1172:34)
    at ProxyTracer.startActiveSpan (/vercel/path0/.next/server/chunks/981.js:1212:36)
    at /vercel/path0/.next/server/chunks/981.js:3530:107
    at NoopContextManager.with (/vercel/path0/.next/server/chunks/981.js:579:30)
{ title: '', description: '', photourl: '', date: '', category: '' }
- info Generating static pages (26/26)
> Export encountered errors on following paths:
    /news/page: /news
Error: Command "npm run build" exited with 1
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1


this is the log
aardani
mmm have you tried building locally
npm run build
actually i lied
i dont
it works perfectly fine
aardani
(╯°□°)╯︵ ┻━┻
Answer
demonslayerOP
but when deploying to vercel
it get that error
aardani
hmmm outdated packages maybe?
did you set the project framework to Next.js?
demonslayerOP
Ohh wait i think i see the issue now
I never imported my env variables
; |
im gonna kms
sorry
thank you for your help
aardani
it happens
demonslayerOP
honestly
@aardani it happens
demonslayerOP
life of a programemr
the smallest things