Nextjs 0.11 release #477

docs/deployment.adoc

@@ -69,10 +69,10 @@ TIP: The purpose of routes is to expose APIs and other endpoints like `:8080/sit
 Use the following settings:
 +
 Internal path:: `/site/hmdb`
-Public path:: `/drafts`
+Public path:: `/hmdb`
 ID provider:: -empty-
 +
-. **Verify that the route is working** by clicking the link in the route details. TODO
+. **Verify that the route is working** by clicking the link in the route details.
 
 == Task: Add your next.js app to Git
 
@@ -88,12 +88,12 @@ Make a note of the URL to the new repo, as you will need this in the next step
 == Taks: Deploy Next app
 You are now ready to deploy the the front-end application.
 
-. Sign up to Vercel: https://vercel.com/ 
+. Sign up to Vercel: https://vercel.com/
 . Create a new project `enonic-tutorial` and connect it to the repo you created in step 2.
 . **Add the following environment variables** to the project (name:value):
 +
-* CONTENT_API_DRAFT:https://nissen-tutorial-production.enonic.net/hmdb/draft
-* CONTENT_API_MASTER:https://nissen-tutorial-production.enonic.net/hmdb/master
+* CONTENT_API_DRAFT:https://<your cloud deployment url>.enonic.net/hmdb/draft
+* CONTENT_API_MASTER:https://<your cloud deployment url>.enonic.net/hmdb/master
 * API_TOKEN:<yoursecretstring>
 
 . **Verify the result** by visiting the app, it will try to render your front-page, you should see a 404 - because you are now back to the automatically imported content again.

docs/index.adoc

@@ -34,7 +34,7 @@ You will complete the following steps:
 The integrations defaults to using Next.js's Incremental Static Rendering (ISR) for extremely fast websites, but also supports the more traditional (and flexible) Server Side Rendered (SSR) approach.
 
 === The Enonic Adapter
-The "Enonic adapter" extends Next.js by giving developers an intuitive way of working with and rendering editorially managed components and pages.
+The "Enonic adapter" extends Next.js by giving developers an intuitive way of working with and rendering editorially managed components and pages from Enonic XP.
 
 === Preview and publishing
 A Next.js extension for Content Studio seamlessly activates Next.js's preview mode, giving editors a familiar and instant visual editing experience. Also, when publishing, the extension will automatically clear cache and trigger new rendering in the front-end.

docs/layouts.adoc

@@ -7,7 +7,7 @@ Layouts are essentially parts, with an extra trick up their sleve. Regions. This
 
 == Task: Add layout to Enonic
 
-Adding layouts is more or less identical to pages and parts. Simply follow the steps below: 
+Adding layouts is more or less identical to pages and parts. Simply follow the steps below:
 
 . **Add the `2-column` layout** to the Enonic app
 +
@@ -38,7 +38,7 @@ var proxy = require('/lib/nextjs/proxy');
 exports.get = proxy.get;
 ----
 +
-When completed, as always redeploy the Enonic app.
+When completed, as always *redeploy the Enonic app*.
 
 == Task: Add layout rendering to the front-end
 

docs/nextjs-setup.adoc

@@ -20,7 +20,7 @@ npx degit [email protected]:enonic/nextjs-enonic-template.git
 
 The "nextjs-enonic-template" is based on link:https://nextjs.org/docs/getting-started[Next.js' own introduction app], so if you're familiar with that, you'll recognize the structure of the files.
 
-The template includes some boilerplate we will customize, and some additional code that facilitates and simplifies integration with Enonic - aka **"the Enonic adapter"**.
+The template includes some boilerplate we will customize, and a npm dependency that facilitates and simplifies integration with Enonic - **"the Enonic adapter"**.
 
 === Code overview
 
@@ -31,27 +31,28 @@ The following file structure should now exist within your new project folder:
 ----
 .evn <!--1-->
 src/
-    _enonicAdapter/ <!--2-->
-    components/ <!--3-->
+    components/ <!--2-->
     pages/
-        [[...contentPath]].tsx <!--4-->
-        _app.tsx <!--5-->
-        _document.tsx <!--6-->
-        _component.tsx <!--7-->
+        [[...contentPath]].tsx <!--3-->
+        _app.tsx <!--4-->
+        _document.tsx <!--5-->
+        _component.tsx <!--6-->
         _renderable.tsx
-        api/ <!--8-->
+        api/ <!--7-->
             revalidate.ts
             preview.ts
 ----
 
 <1> Environment variables are placed in this file
-<2> Contains integration and rendering logic to work smoothly together with Enonic XP. You should never need to modify these files. Planned to be released as an NPM in the future.
-<3> Contains your implementation of CMS components
-<4> The fallback next.js router. Enables dynamic rendering based on content in the CMS. File name is not a typo, but Next.js syntax that makes it catch all HTTP requests.
-<5> Invoked on every request. Add common structures here (eg. `<head>` etc), but be careful not to remove functionality needed by Content Studio
-<6> Vanilla Next.js file that outlines the basic document structure of all pages.
-<7> Files supporting the visual page editor in Content Studio
-<8> These files support preview mode and regeneration of cached pages
+<2> Contains your implementation of CMS components
+<3> The fallback next.js router.
+Enables dynamic rendering based on content in the CMS.
+File name is not a typo, but Next.js syntax that makes it catch all HTTP requests.
+<4> Invoked on every request.
+Add common structures here (eg. `<head>` etc), but be careful not to remove functionality needed by Content Studio
+<5> Vanilla Next.js file that outlines the basic document structure of all pages.
+<6> Files supporting the visual page editor in Content Studio
+<7> These files support preview mode and regeneration of cached pages
 
 
 == Task: Configure application

docs/pages.adoc

@@ -50,7 +50,7 @@ Content types need to exist in Enonic before an editor can create content. Simil
 +
 NOTE: The definition of the region `main`, allows Content Studio editors to add components to the page, as you will see later.
 +
-Redploy the Enonic app to register the page component.
+**Redploy the Enonic app to register the page component.**
 +
 . **Configure page rendering in Next**
 On the Next side of things, rendering a page is similar to rendering a content type. Add the following file to your Next project.

docs/preview.adoc

@@ -10,10 +10,10 @@ To get preview going, you need to make a few changes to the Enonic app:
 
 . **Add the NextJS integration**:
 +
-The https://github.com/enonic/lib-nextjs[Nextjs library] will provide the features we need to setup the preview, and then some. Add it to your dependencies list by adding the following line:
+The https://github.com/enonic/lib-nextjs[Nextjs library] will provide the features we need to setup the preview, and then some.Add it to your dependencies list by adding the following line:
 +
 ./build.gradle
-[source, groovy, options="nowrap"]
+[source,groovy,options="nowrap"]
 ----
 dependencies {
     ...
@@ -22,14 +22,17 @@ dependencies {
 }
 ----
 +
-IMPORTANT: Ensure <version> is replaced by the most current version available. Visit the library on link:https://market.enonic.com/vendors/enonic/nextjs-lib[Enonic Market]. Click `Get started` and choose the latest version.
+IMPORTANT: Ensure <version> is replaced by the most current version available.
+Visit the library on link:https://market.enonic.com/vendors/enonic/nextjs-lib[Enonic Market].
+Click `Get started` and choose the latest version.
 +
 . *Update site configuration*
 +
-To trigger the next.js integration in Content Studio, we must update the https://developer.enonic.com/docs/xp/stable/components/mappings[controller mappings], and add a configuration form to the site. Replace your current site.xml with this:
+To trigger the next.js integration in Content Studio, we must update the https://developer.enonic.com/docs/xp/stable/cms/mappings[controller mappings], and add a configuration form to the site.
+Replace your current site.xml with this:
 +
 .src/main/resources/site/site.xml
-[source, xml]
+[source,xml]
 ----
 <?xml version="1.0" encoding="UTF-8"?>
 <site xmlns="urn:enonic:xp:model:1.0">
@@ -51,7 +54,7 @@ To trigger the next.js integration in Content Studio, we must update the https:/
 </site>
 ----
 +
-TIP: Studying the file above, you will see the proxy mapping to `/.*`, which essentially means "catch all" URL patterns. The form contains one field for the server URL, and one for the API token.
+TIP: Studying the file above, you will see the proxy mapping to `/.*`, which essentially means "catch all" URL patterns.The form contains one field for the server URL, and one for the API token.
 +
 . **Redeploy the Enonic app** to activate the changes:
 +

docs/rendering-basics.adoc

@@ -30,15 +30,15 @@ This file defines a graphQL query 'getPerson' that will fetch data from the Enon
 TIP: You may validate the query by copying it to the GraphQL playground. Replace `APP_NAME_UNDERSCORED` with `com_example_myproject` and set a query variable, try this for instance:
   `{"path": "/hmdb/persons/brad-pitt"}``
 +
-. **Register the query** by adding the following lines to the component mappings file: 
+. **Register the query** by adding the following lines to the component mappings file:
 +
 NOTE: Do not copy the `...` - it is just there to illustrate there are other lines of code you should keep in the target file.
 +
 .src/components/_mappings.ts
 [source,JavaScript]
 ----
 import getPerson from './queries/getPerson';
-import {APP_NAME} from '../_enonicAdapter/utils'
+import {APP_NAME} from '@enonic/nextjs-adapter';
 
 ...
 
@@ -97,7 +97,7 @@ The content type mapping applies to every `person` content item in the site, reg
 
 Adding some styles, a header and a footer will make the site more interesting visually. Next provides a handy solution to this problem.
 
-The `_app.tsx` file initializes the React pipeline, and by modifying it we can inject the same header and footer components to all pages generated by Next. 
+The `_app.tsx` file initializes the React pipeline, and by modifying it we can inject the same header and footer components to all pages generated by Next.
 
 TIP: Sample header and footer views are already included in the starter under /`src/components/views`, so all we need to do is put them to work.
 
@@ -109,7 +109,7 @@ Update `src/pages/_app.tsx`` with the following changes:
 ----
 import Header from '../components/views/Header';
 import Footer from '../components/views/Footer';
-import { getUrl } from '../_enonicAdapter/UrlProcessor';
+import {getUrl} from '@enonic/nextjs-adapter/UrlProcessor';
 ----
 +
 . And **replace this line**:

docs/revalidation.adoc

@@ -90,16 +90,16 @@ You should see something like this:
 
 == Task: Revalidate pages
 
-The app is already connected to the NextJS server, and has the API token. Its time to test if it is working.
+The app is already connected to the NextJS server, and has the API token.Its time to test if it is working.
 
 **Edit and publish changes to your front page** once again
 
-This time the page should get updated with your latest changes. 🎉
-
+This time, despite running in production static mode, that page should get updated at `http://localhost:4242` with your latest changes same way as it was in development mode.
+🎉
 
 NOTE: You should also be able to tell from the NextJS log that the revalidation was triggered.
 
-With prod mode and revalidation sorted out, its about time you <<deploy#, deploy your apps to live servers>>.
+With prod mode and revalidation sorted out, its about time you <<deployment#, deploy your apps to live servers>>.