Add doc about native Next.js optimisations

Author: Vadorequest

src/pages/README.md

@@ -0,0 +1,23 @@
+# Next.js pages
+
+[Official documentation](https://nextjs.org/docs/basic-features/pages)
+
+## Native optimisations
+
+Next.js automatically optimise the page client build based on whether they implement `getStaticProps` (SSG) or `getServerSideProps` (SSR).
+
+For instance, all code within `getStaticProps` and `getServerSideProps` is automatically stripped from the browser bundle.
+But, it's also the case for top-level `import` that are only used within those functions.
+
+### Visualise bundle optimisation
+
+[https://next-code-elimination.now.sh/](https://next-code-elimination.now.sh/) will help you visualise the difference between the code you write and what's actually bundled into the client.
+
+Example with:
+- [https://next-code-elimination.now.sh/s/hc9SWg_fj]([locale]/examples/pageTemplateSSG)
+- [https://next-code-elimination.now.sh/s/M0oIDdQJ2]([locale]/examples/pageTemplateSSR)
+- [https://next-code-elimination.now.sh/s/nejeyE9MH]([locale]/examples/native-features/example-with-ssg-and-fallback/[albumId])
+
+> You'll notice for both those files that server-side module imports such as `ApolloQueryResult` are completely stripped from the client-side build.
+>
+> Also, for `[albumId]`, relative imports such as `songs` are also automatically stripped!

src/pages/[locale]/examples/native-features/example-with-ssg-and-fallback/[albumId].tsx

@@ -12,6 +12,7 @@ import I18nLink from '../../../../../components/i18n/I18nLink';
 import DefaultLayout from '../../../../../components/pageLayouts/DefaultLayout';
 import ExternalLink from '../../../../../components/utils/ExternalLink';
 import withApollo from '../../../../../hocs/withApollo';
+import songs from '../../../../../mocks/songs';
 import { StaticParams } from '../../../../../types/nextjs/StaticParams';
 import { StaticPath } from '../../../../../types/nextjs/StaticPath';
 import { StaticPathsOutput } from '../../../../../types/nextjs/StaticPathsOutput';
@@ -44,8 +45,6 @@ export const getStaticProps: GetStaticProps<SSGPageProps, StaticParams> = async
   const awaitForMs = getRandomInt(1000, 4000);
   await waitFor(awaitForMs);
 
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const songs = require('../../../../../mocks/songs').default;
   let songId = parseInt(albumId);
 
   if (songId > songs.length - 1) { // Handle overflow
@@ -161,6 +160,7 @@ const ExampleWithSSGAndFallbackAlbumPage: NextPage<Props> = (props): JSX.Element
             background-color: white;
             border-radius: 5px;
             padding: 30px;
+            text-align: center;
           `}
         >
           <h1>Album N°{albumId}</h1>