如何使用getServerSideProps

Question

我是next.js的新手。最近，我了解了next.js中的预渲染技术，并且对如何从getServerSideProps更新道具数据感到困惑。

_app.tsx

import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

/页面/任务/list.tsx

Answer 1

下面是一个关于如何使用GetServerSideProps的示例：

//'pages/index.js'

// Extraction des articles reçus via les props
// Props extraction 
export default function Home({articles}) {
    return (
        <div>
            {articles.map((el, key) => (
                <div key={key}>
                    <p>{JSON.stringify(el)}</p>

                </div>
            ))}
        </div>
    )
}
export const getServerSideProps = async (context) => {

    // Fetching de notre route
    // API fetching
    const res = await fetch('http://localhost:3000/api/yourApiRoutes')

    // Récupération des données de notre requête
    // Cast value to json object
    const articles = await res.json()

    return {
        // Approvisionnement des props de notre page
        // Sending articles to page
        props: {articles: articles}
    }
}

希望我能帮忙！