Next.js 入門

安裝設置:

$ npx create-next-app@latest

#開發模式下啟動 Next.js 專案

$ npm run dev

#build next prod application

$ npm run build

#啟動next prod server

$ npm run start

Example:

1. SSG: 透過外部api取得資料建立靜態頁面

export async function getStaticProps() {

    const res = await fetch('http://localhost/redis/public/api/article')

    const data = await res.json()

    return {

        props: {

            data,

        },

    }

}

function Article({ data }) {

    return (

        <ul>

          {data.message.map((article) => (

            <li>{article.title} - {article.create_datetime}</li>

          ))}

        </ul>

    )

}

export default Article

export async function getStaticPaths() {

    const res = await fetch('http://localhost/redis/public/api/article')

    const data = await res.json()

    const paths = data.message.map((article) => ({

        params: { title: article.title.toString() },

    }))

    return { paths, fallback: false }

}

export async function getStaticProps({ params }) {

    const res = await fetch(`http://localhost/redis/public/api/article?title=${params.title}`)

    const data = await res.json()

    return { props: { data } }

}

function Article({ data }) {

    return (

        <ul>

            <li>{data.message.title} - {data.message.create_datetime}</li>

        </ul>

    )

}

export default Article

• articles/[title].js 這種使用方式，目的為使用文章title來建立預渲染的路徑。
• getStaticPaths: 用來生成所有需要預渲染的路徑，這邊是設定三篇文章的title。
• getStaticProps: 根據params的文章title透過外部api取得文章資料，渲染該文章靜態頁面。
• SSG方式需特別注意，只要DB資料有變動，例如有新增、修改文章或文章被刪除，就需要重新build code，產生新的靜態頁面。(npm run dev模式下會讓人誤以為是動態的，需特別注意)

export async function getServerSideProps() {

    const res = await fetch(`http://localhost/redis/public/api/article`)

    const data = await res.json()

    return { props: { data } }

}

function ArticleSSR({ data }) {

    return (

        <ul>

          {data.message.map((article) => (

            <li key={article.id}>{article.title} - {article.create_datetime}</li>

          ))}

        </ul>

    )

}

export default ArticleSSR

• getServerSideProps: 每次request進來會執行這邊，取得資料後送到ArticleSSR渲染HTML。
• 由於是每次request都會動態拿資料，因此適合變動頻繁的系統，不須重新build code。

結論:

• Next.js框架支援SSR/SSG可以讓開發者根據情境選擇適合的用法，加上配置好的Routing，不須像React SPA轉MPA一樣要經過繁雜的設定，可說是相當的方便。
• 關於SSR/SSG的選擇，建議除非有必要性，否則一律使用SSG速度會比較快，畢竟是預渲染好的頁面。若是使用情境會需要頻繁更動資料，無法忍受每次都要重build code的話，就選擇SSR。
• Next.js不僅解決了SEO問題，還可以混用CSR，使用SSR/SSG，讓頁面第一次載入速度變快，小區塊UI變動則使用CSR，不必整個頁面重新生成，等於結合了各方優點，只要適當的使用，必能大大提升應用程式的使用者體驗。