Link Search Menu Expand Document

Quickstart

npm init next-app nextjs-blog --example "https://github.com/zeit/next-learn-starter/tree/master/learn-starter"
  • In Next.js, a page is a React Component exported from a file in the pages directory.
  • Pages are associated with a route based on their file name. For example, in development:
    • pages/index.js is associated with the / route.
    • pages/posts/first-post.js is associated with the /posts/first-post route.
  • Next.js does code splitting automatically
  • in a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background
  • use link instead of a

  • server side

import Link from 'next/link'

Read <Link href="/posts/first-post"><a>this page!</a></Link>


  • client side
    • The Link component enables client-side navigation between two pages in the same Next.js app.

Assets, Metadata, and CSS

link: https://nextjs.org/learn/basics/assets-metadata-css

Pre-rendering and Data Fetching

  • By default, Next.js pre-renders every page.

  • Next.js has two forms of pre-rendering:
    • Static Generation
    • Server-side Rendering
      • Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
      • Server-side Rendering is the pre-rendering method that generates the HTML on each request.
  • In development mode
    • every page is pre-rendered on each request — even for pages that use Static Generation.
  • choose which pre-rendering form to use for each page
    • You can create a “hybrid” Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
  • Choosing
    • Static if possible
    • On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user’s request. Maybe your page shows frequently updated data, and the page content changes on every request.
  • static rendering with data
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

Dynamic Routes

src: https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops

  • generate routes based on static content

API Routes

src: https://nextjs.org/learn/basics/api-routes


Copyright © 2020 Thence LLC