Fix documentation issues enonic#703

docs/deployment.adoc

@@ -97,7 +97,7 @@ By default `Next.XP` uses the following values:
 +
 `url: *http://127.0.0.1:3000*`
 +
-`secret: *mySecret*`
+`secret: *mySecretKey*`
 +
 .Add the following lines to the app config field if you want to override default values:
 [source,properties]

docs/i18n.adoc

@@ -24,15 +24,41 @@ module.exports = {
 
 Full documentation is https://nextjs.org/docs/pages/building-your-application/routing/internationalization[available here].
 
-== Task: Set up i18n
+== Task: Create localized content
+
+First, we need to create some localized content in Enonic XP.
+To do that, go to Content Studio and click on the `Settings` icon on the left-hand side of the grid.
+You will be presented with the list of projects:
+
+image:content-studio-project-list.png[title="Project list",width=2559px]
+
+Select the `Movie DB` project and click on the `New...` button that will take you to the new layer wizard:
+
+image:content-studio-project-wizard.png[title="New layer wizard",width=2559px]
+
+Fill in the form with the following values:
+
+* *Name*: `Norsk Movie DB`
+* *Identifier*: `moviedb-no`
+* *Language*: `norsk (no)`
+* *Access mode*: `Public`
+
+Rest of the fields are arbitrary and can be left as is.
+After saving it and closing the wizard you should see new layer in the list:
+
+image:content-studio-project-list-2.png[title="Project list",width=2559px]
+
+Now you can move on to configuring Next.XP to use this new layer.
+
+== Task: Set up i18n in Next.XP
 
 In addition to specifying locales in `next.config.js` file, you will need to instruct Next.XP which project to use for every locale.
 This is done in the `ENONIC_PROJECTS` environmental variable:
 
 ..env
 [source,Properties,options="nowrap"]
 ----
-ENONIC_PROJECTS=hmdb/hmdb,no:hbmd-no/norges-hmdb
+ENONIC_PROJECTS=moviedb/hmdb,no:moviedb-no/hmdb
 ----
 
 Let's break down the syntax:
@@ -41,9 +67,9 @@ Let's break down the syntax:
 +
 IMPORTANT: This should be present at all times, even when you have no locales configuration in `next.config.js` because this instructs Next.XP where to get the data from.
 +
-2. Then comes additional locale identifier and the repository with site path, separated by a colon: `no:hmdb-no/norges-hmdb` telling Next.XP to use `/norges-hmdb` site in `hmdb-no` project for `no` locale
+2. Then comes additional locale identifier and the repository with site path, separated by a colon: `no:moviedb-no/hmdb` telling Next.XP to use `/hmdb` site in `moviedb-no` project for `no` locale
 +
-NOTE: You can have different site paths for different locales: _/hmdb_ for english and _/norges-hmdb_ for norwegian
+NOTE: You can have different site paths for different locales: i.e. `/hmdb` for english and `/norges-hmdb` for norwegian
 +
 3. You need to have `<locale>:<project>/<site-path>` definition for all locales configured in `next.enonic.js` except for the default one which suffice `<project>/<site-path>`.
 

docs/nextjs-setup.adoc

@@ -7,7 +7,8 @@ In this chapter we will create a front-end application that renders pages based
 
 == Next.js at a glance
 
-link:https://nextjs.org/[**Next.js**] runs on top of link:https://nodejs.org/en/[Node.js], and provides a shrink-wrapped approach to building sites using the link:https://reactjs.org/[React framework]). Next.js supports both client-side rendering and link:https://nextjs.org/docs/basic-features/´pages#static-generation-recommended[Server side rendering], as well as pre-generation of static HTML files.
+link:https://nextjs.org/[**Next.js**] runs on top of link:https://nodejs.org/en/[Node.js], and provides a shrink-wrapped approach to building sites using the link:https://reactjs.org/[React framework].
+Next.js supports both client-side rendering and link:https://nextjs.org/docs/basic-features/´pages#static-generation-recommended[Server side rendering], as well as pre-generation of static HTML files.
 
 == Task: Create the Next.js project
 
@@ -71,7 +72,7 @@ ENONIC_API_TOKEN=mySecretKey
 ENONIC_APP_NAME=com.example.myproject
 
 # Enonic XP projects configuration for different locales
-ENONIC_PROJECTS=hmdb/hmdb <1>
+ENONIC_PROJECTS=moviedb/hmdb <1>
 
 # Absolute URL to Content API
 ENONIC_API=http://127.0.0.1:8080/site <2>

docs/pages.adoc

@@ -53,7 +53,10 @@ NOTE: The definition of the region `main`, allows Content Studio editors to add
 Redploy the Enonic app to register the page component.
 +
 . **Configure page rendering in Next.js**
-Rendering a page is similar to rendering a content type. Go to the folder `./src/components`, create a new folder here - `pages`, and within it a new file called `Main.tsx` containing the following code.
+Rendering a page is similar to rendering a content type.
+Go to the folder `./src/components`, create a new folder here - `pages`, and within it a new file called `Main.tsx` containing the following code.
++
+WARNING: Make sure to use `src/components/pages`, not `src/pages`!
 +
 .src/components/pages/Main.tsx
 [source,TypeScript]

docs/preview.adoc

@@ -28,7 +28,7 @@ By default `Next.XP` uses the following values:
 +
 `url: *http://127.0.0.1:3000*`
 +
-`secret: *mySecret*`
+`secret: *mySecretKey*`
 +
 You can change default values and add more configurations by adding a config file named `_com.enonic.app.nextxp.cfg_` in `_<xp-home>/config/_` folder:
 +

docs/static.adoc

@@ -6,7 +6,7 @@ In this chapter you will learn about NextJS' static pages and how the Enonic tri
 
 == Introduction
 
-The NextJS front-end is configured to use static site generation (SSG), which basically means you get lightning fast pages.
+The NextJS front-end is configured to use Static Site Generation (SSG), which basically means you get lightning fast pages.
 On top of that, it has some improvements to remove common shortcomings of static pages, such as live preview in Content Studio or getting new pages and changes instantly live on your site.
 
 == Prod mode
@@ -59,10 +59,6 @@ export async function getStaticPaths(): Promise<GetStaticPathsResult<any>> {
 
 As you can see, Next.XP provides methods to create static pages, but the best part is that those methods will also work for server side rendering !
 
-TIP: Next.js also supports Server Side Rendering (SSR) which can be enabled by renaming `getStaticProps` to `getServerSideProps` and dropping the `getStaticPaths` method.
-In this mode all rendering will be "real time", meaning no caching.
-More about https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering[SSR].
-
 == Task: Activate prod mode
 
 TIP: Remember to stop your existing Next.js dev instance before you continue.
@@ -86,12 +82,26 @@ TIP: Content Studio uses Next.js' preview mode, which automatically bypass stati
 
 == Task: Test page invalidation
 
-. **Edit your front-page, and publish the changes**.This will trigger a revalidation hook.
+. **Edit your front-page, and publish the changes**.
+This will trigger a revalidation hook.
 
 Despite using static pages, the page should get updated at `http://localhost:4242` with your latest changes - more or less instantly.🎉
 
-How does it work?In addition to handling previews, the Next.XP app automatically triggers revalidation of all pages when it detects the publishing event.
+How does it work?
+In addition to handling previews, the Next.XP app automatically triggers revalidation of all pages when it detects the publishing event.
 
 NOTE: You should also be able to tell from the Next.js log that the revalidation was triggered.
 
+== Optional task: Convert to Server Side Rendering (SSR)
+
+Next.js supports several ways of rendering along with Static Site Generation (SSG).
+
+Server Side Rendering (SSR) is one of them and can be enabled by:
+
+. renaming `getStaticProps` to `getServerSideProps`
+. removing the `getStaticPaths` method.
+
+In this mode Next.js will render the page on every request, while still using the same Next.XP methods for fetching data from Enonic XP.
+More about SSR https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering[here].
+
 With prod mode and revalidation sorted out, it's about time you <<deployment#, deploy your apps to live servers>>.