Next.js: Difference between revisions
No edit summary |
|||
Line 1: | Line 1: | ||
Next.js allows you to deploy web applications with dynamic server-side and client-side rendering. | 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. | 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.<br> | |||
To add properties or data to your page while keeping it static, i.e. at build time, use <code>getStaticProps</code>. | |||
To add properties or data to your page dynamically, i.e. at request time, use <code>getServerSideProps</code>. | |||
Individual components may have dynamic properties loaded automatically using <code>getInitialProps</code>. | |||
However, this needs to be able to run on the server or the client, best done by sending a request to an external API.<br> | |||
Alternatively, you can directly import json data in your code using webpack to embed static data into your program. | |||
===Environment variables=== | |||
https://nextjs.org/docs/basic-features/environment-variables<br> | |||
https://nextjs.org/docs/api-reference/next.config.js/environment-variables<br> | |||
Enviromnent variables are loaded from your enviroment, <code>.env.local</code>, and <code>.env</code>. | |||
You can also use <code>.env.development</code> and <code>.env.production</code> to store overrides to <code>.env</code>. | |||
Environment variables can be read from <code>process.env</code> 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 <code>NEXT_PUBLIC_</code> | |||
==Static HTML Export== | ==Static HTML Export== |
Revision as of 00:19, 6 February 2023
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 data 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 /