Next.js: Difference between revisions

From David's Wiki
(Created page with "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. ==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 wo...")
 
 
(6 intermediate revisions by the same user not shown)
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 [https://webpack.js.org/guides/asset-modules/ 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<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==
Line 10: Line 31:
davidl.me {
davidl.me {
   root * /var/www/davidl_me/out
   root * /var/www/davidl_me/out
  try_files {path} {path}.html
   file_server
   file_server
  try_files {path} {path}.html
}
}
</pre>
 
If you have folders with the same names as pages, you may want to remove trailing slashes:
<pre>
# Using a redirect
@pathWithSlash path_regexp dir ^(.*/.*)/$
redir @pathWithSlash {re.dir.1}
# Using a rewrite
uri strip_suffix /
</pre>
</pre>

Latest revision as of 21:29, 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 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 /