NodeJS系列（11）- Next.js 框架 (四)

            export default ({ repo }) => {
                return repo.stargazers_count
            }

            export const getStaticProps = async () => {
                const res = await fetch('https://api.github.com/repos/vercel/next.js')
                const repo = await res.json()
                return { props: { repo } }
            }

            // The following function is shared
            // with getStaticProps and API routes
            // from a `lib/` directory
            export const loadPosts = async () => {
                // Call an external API endpoint to get posts
                const res = await fetch('https://.../posts/')
                const data = await res.json()
                
                return data
            }

            // pages/blog.js
            import { loadPosts } from './lib/load-posts'
            
            // This function runs only on the server side
            export const getStaticProps = async () => {
                // Instead of fetching your `/api` route you can call the same
                // function directly in `getStaticProps`
                const posts = await loadPosts()
                
                // Props returned will be passed to the page component
                return { props: { posts } }
            }

        export default ({ repo }) => {
            return repo.stargazers_count
        }

        export const getStaticPaths = async () => {
            return {
                paths: [
                    {
                        params: {
                            name: 'next.js',
                        },
                    }, // See the "paths" section below
                ],
                fallback: true, // false or "blocking"
            }
        }
        
        export const getStaticProps = async () => {
            const res = await fetch('https://api.github.com/repos/vercel/next.js')
            const repo = await res.json()
            return { props: { repo } }
        }

        export default ({ posts }) => {
            
            ...

        }

        export async function getStaticPaths() {
            // When this is true (in preview environments) don't
            // prerender any static pages
            // (faster builds, but slower initial page load)
            if (process.env.SKIP_BUILD_STATIC_GENERATION) {
                return {
                    paths: [],
                    fallback: 'blocking',
                }
            }
        
            // Call an external API endpoint to get posts
            const res = await fetch('https://.../posts')
            const posts = await res.json()
            
            // Get the paths we want to prerender based on posts
            // In production environments, prerender all pages
            // (slower builds, but faster initial page load)
            const paths = posts.map((post) => ({
                params: { id: post.id },
            }))
            
            // { fallback: false } means other routes should 404
            return { paths, fallback: false }
        }        

        export const getStaticProps = async () => {

            ...

            return { props: { posts } }
        }

        export default ({ data }) => {
            // Render data ...

        }
        
        // This gets called on every request
        export const getServerSideProps = async () => {
            // Fetch data from external API
            const res = await fetch(`https://.../data`)
            const data = await res.json()
            
            // Pass data to the page via props
            return { props: { data } }
        }

        export default ({ data }) => {
            // Render data ...

        }

        // This value is considered fresh for ten seconds (s-maxage=10).
        // If a request is repeated within the next 10 seconds, the previously
        // cached value will still be fresh. If the request is repeated before 59 seconds,
        // the cached value will be stale but still render (stale-while-revalidate=59).
        //
        // In the background, a revalidation request will be made to populate the cache
        // with a fresh value. If you refresh the page, you will see the new value.
        export const getServerSideProps = async ({ req, res }) => {
            res.setHeader(
                'Cache-Control',
                'public, s-maxage=10, stale-while-revalidate=59'
            )

            ...
            
            // Pass data to the page via props
            return { props: { data } }
        }

        export const config = {
            runtime: 'nodejs', // or "edge"
        }
        
        export const getServerSideProps = async () => {}

        export default (req, res) => {
            // Get data submitted in request's body.
            const body = req.body

            // Optional logging to see the responses
            // in the command line where next.js app is running.
            console.log('body: ', body)

            if (!body.username || !body.password) {
                // Sends a HTTP bad request error code
                return res.status(400).json({ data: 'Username or password not found' })
            }

            // Found the name.
            // Sends a HTTP success code
            res.status(200).json({ data: `${body.username} ${body.password}` })
        }

        export default () => {
            // Handles the submit event on form submit.
            const handleSubmit = async (event) => {
                // Stop the form from submitting and refreshing the page.
                event.preventDefault()

                // Get data from the form.
                const data = {
                    username: event.target.username.value,
                    password: event.target.password.value,
                }

                console.log('data: ', data)

                // Send the data to the server in JSON format.
                const JSONdata = JSON.stringify(data)

                // API endpoint where we send form data.
                const endpoint = '/api/login'

                // Form the request for sending data to the server.
                const options = {
                    // The method is POST because we are sending data.
                    method: 'POST',
                    // Tell the server we're sending JSON.
                    headers: {
                    'Content-Type': 'application/json',
                    },
                    // Body of the request is the JSON data we created above.
                    body: JSONdata,
                }

                // Send the form data to our forms API on Vercel and get a response.
                const response = await fetch(endpoint, options)

                console.log('response: ', response)

                // Get the response data from server as JSON.
                // If server returns the name submitted, that means the form works.
                const result = await response.json()
                alert(`Login info: ${result.data}`)
            }

            return (
                <form onSubmit={handleSubmit}>
                <p>&nbsp;</p>

                <p><label for="username">Username: </label>
                <input type="text" id="username" name="username" required value="admin"/></p>

                <p><label for="password">Password: </label>
                <input type="text" id="password" name="password" required value="123456"/></p>

                <p><button type="submit">Submit</button></p>
                </form>
            )  

        }