Next.js: Difference between revisions
(2 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 18: | Line 39: | ||
<pre> | <pre> | ||
# Using a redirect | # Using a redirect | ||
@pathWithSlash path_regexp dir ^(.*)/$ | @pathWithSlash path_regexp dir ^(.*/.*)/$ | ||
redir @pathWithSlash {re.dir.1} | redir @pathWithSlash {re.dir.1} | ||
# Using a rewrite | # Using a rewrite | ||
uri strip_suffix / | uri strip_suffix / | ||
</pre> | </pre> |