如何使用 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;

/pages/tasks/list.tsx更新 props 数据感到困惑

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}
    }
}

希望我能提供帮助！