Next.js: Difference between revisions

(2 intermediate revisions by the same user not shown)

Line 1:

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.<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==

Line 18:

Line 39:

<pre>

# Using a redirect

@pathWithSlash path_regexp dir ^(.*)/$

@pathWithSlash path_regexp dir ^(.*/.*)/$

redir @pathWithSlash {re.dir.1}

# Using a rewrite

uri strip_suffix /

</pre>

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