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，不必整個頁面重新生成，等於結合了各方優點，只要適當的使用，必能大大提升應用程式的使用者體驗。