Next.js

From David's Wiki
\( \newcommand{\P}[]{\unicode{xB6}} \newcommand{\AA}[]{\unicode{x212B}} \newcommand{\empty}[]{\emptyset} \newcommand{\O}[]{\emptyset} \newcommand{\Alpha}[]{Α} \newcommand{\Beta}[]{Β} \newcommand{\Epsilon}[]{Ε} \newcommand{\Iota}[]{Ι} \newcommand{\Kappa}[]{Κ} \newcommand{\Rho}[]{Ρ} \newcommand{\Tau}[]{Τ} \newcommand{\Zeta}[]{Ζ} \newcommand{\Mu}[]{\unicode{x039C}} \newcommand{\Chi}[]{Χ} \newcommand{\Eta}[]{\unicode{x0397}} \newcommand{\Nu}[]{\unicode{x039D}} \newcommand{\Omicron}[]{\unicode{x039F}} \DeclareMathOperator{\sgn}{sgn} \def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits} \def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits} \)

Next.js allows you to deploy web applications with dynamic server-side and client-side rendering. It also supports static site generation which allows you to build a website and serve it from a file server of your choice.

Server and Client Rendering

Next.js supports server-side rendering and client-side rendering on a per-page level. Per-component level is under development in beta.

By default your pages will be statically rendered on the server at build time.
To add properties or data to your page while keeping it static, i.e. at build time, use getStaticProps. To add properties or data to your page dynamically, i.e. at request time, use getServerSideProps.

Individual components may have dynamic properties loaded automatically using getInitialProps. However, this needs to be able to run on the server or the client, best done by sending a request to an external API.
Alternatively, you can directly import json or assets in your code using webpack to embed static data into your program.

Environment variables

https://nextjs.org/docs/basic-features/environment-variables
https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Enviromnent variables are loaded from your enviroment, .env.local, and .env. You can also use .env.development and .env.production to store overrides to .env.

Environment variables can be read from process.env on the server (i.e. in getStaticProps and getServerSideProps). If you want to read enviroment variables elsewhere in your code, variables can be made public by using prefix NEXT_PUBLIC_

Static HTML Export

Reference: https://nextjs.org/docs/advanced-features/static-html-export

With a static export, you can serve your website using any file server which can rewrite paths to html files. For example, in Caddy the following config would suffice:

davidl.me {
  root * /var/www/davidl_me/out
  try_files {path} {path}.html
  file_server
}

If you have folders with the same names as pages, you may want to remove trailing slashes:

# Using a redirect
@pathWithSlash path_regexp dir ^(.*/.*)/$
redir @pathWithSlash {re.dir.1}
# Using a rewrite
uri strip_suffix /