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>