File-System Routing

• Next.js has a file-system based router built on the concept of pages.
• When a file is added to the pages directory it's automatically available as a route.
• The files inside the pages directory can be used to define most common patterns.

Index Routes

• The router will automatically route files named index to the root of the directory.
  

Nested Routes

• The router supports nested files. If you create a nested folder structure files will be automatically routed in the same way still.

Dynamic Route Segments

• To match a dynamic segment you can use the bracket syntax. This allows you to match named parameters.

SSR vs SSG vs Html Export

CSR - Client Side Rendering

Pre-Rendering

• By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.

• Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

SSR

• The HTML is generated on each request.

• To make a page use Server-side Rendering, export getServerSideProps. Because Server-side Rendering results in slower performance than Static Generation, use this only if absolutely necessary.

SSG - Static Site Generation

• The HTML is generated at build time and will be reused on each request.

• To make a page use Static Generation, either export the page component, or export getStaticProps (and getStaticPaths if necessary). It's great for pages that can be pre-rendered ahead of a user's request. You can also use it with Client-side Rendering to bring in additional data.

HTML Export

• HTML is generated once in export time and reused everytime

• next export command allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.