73 | The Docs are generated in nested manner and have urls in same pattern
74 | as file structure.
75 |
76 |
77 |
78 |
79 |
80 |
81 |
Docs - Flat
82 |
83 | The Docs can also be displayed in a flattened manner as well but have
84 | urls in same pattern as file structure. (These have not been sorted by
85 | date)
86 |
36 |
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/posts/pre-rendering.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Two Forms of Pre-rendering'
3 | date: '2020-01-01'
4 | ---
5 |
6 | Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
7 |
8 | - **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
9 | - **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.
10 |
11 | Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
12 |
--------------------------------------------------------------------------------
/posts/ssg-ssr.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'When to Use Static Generation v.s. Server-side Rendering'
3 | date: '2020-01-02'
4 | ---
5 |
6 | We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
7 |
8 | You can use Static Generation for many types of pages, including:
9 |
10 | - Marketing pages
11 | - Blog posts
12 | - E-commerce product listings
13 | - Help and documentation
14 |
15 | You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
16 |
17 | On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
18 |
19 | In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
20 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xypnox/next-nested/a283f43bc620d7628e27ec8ce4b54f955f2d9047/public/favicon.ico
--------------------------------------------------------------------------------
/public/images/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xypnox/next-nested/a283f43bc620d7628e27ec8ce4b54f955f2d9047/public/images/profile.png
--------------------------------------------------------------------------------
/styles/global.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7 | line-height: 1.6;
8 | font-size: 18px;
9 | }
10 |
11 | * {
12 | box-sizing: border-box;
13 | }
14 |
15 | a {
16 | color: #0070f3;
17 | text-decoration: none;
18 | }
19 |
20 | a:hover {
21 | text-decoration: underline;
22 | }
23 |
24 | img {
25 | max-width: 100%;
26 | display: block;
27 | }
28 |
--------------------------------------------------------------------------------
/styles/utils.module.css:
--------------------------------------------------------------------------------
1 | .heading2Xl {
2 | font-size: 2.5rem;
3 | line-height: 1.2;
4 | font-weight: 800;
5 | letter-spacing: -0.05rem;
6 | margin: 1rem 0;
7 | }
8 |
9 | .headingXl {
10 | font-size: 2rem;
11 | line-height: 1.3;
12 | font-weight: 800;
13 | letter-spacing: -0.05rem;
14 | margin: 1rem 0;
15 | }
16 |
17 | .headingLg {
18 | font-size: 1.5rem;
19 | line-height: 1.4;
20 | margin: 1rem 0;
21 | }
22 |
23 | .headingMd {
24 | font-size: 1.2rem;
25 | line-height: 1.5;
26 | }
27 |
28 | .borderCircle {
29 | border-radius: 9999px;
30 | }
31 |
32 | .colorInherit {
33 | color: inherit;
34 | }
35 |
36 | .padding1px {
37 | padding-top: 1px;
38 | }
39 |
40 | .list {
41 | list-style: none;
42 | padding: 0;
43 | margin: 0;
44 | }
45 |
46 | .listItem {
47 | margin: 0 0 1.25rem;
48 | }
49 |
50 | .lightText {
51 | color: #999;
52 | }
53 |
--------------------------------------------------------------------------------
45 |
46 |
47 |