Skip to content

Commit

Permalink
fixed misc errors
Browse files Browse the repository at this point in the history
  • Loading branch information
sigdestad authored and pmi committed Sep 12, 2023
1 parent 1f102b2 commit bdcd6b9
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 26 deletions.
16 changes: 8 additions & 8 deletions docs/deployment.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -61,19 +61,19 @@ Vercel (which will be hosting your front-end) will need write access to a Git re

. **Create a new Git repo** - Vercel supports Github, Gitlab and Bitbucket.
+
. **Commit and push** your Next.js app files to a the new repo.
. **Commit and push** your Next.js app files to the new repo.


== Task: Deploy Next app
You are now ready to deploy the the front-end application.

. Sign up to Vercel: https://vercel.com/
. Create a new project `enonic-tutorial` and connect it to the repo you created in the previous step.
. **Add the following environment variables** to the project (name:value):
. **Add the following environment variables** to the project (name: value):
+
* ENONIC_API:<enonic route URL>
* ENONIC_API_TOKEN:<yourSecret>
* ENONIC_PROJECTS:moviedb/hmdb
* ENONIC_API: <enonic route URL>
* ENONIC_API_TOKEN: <yourSecret>
* ENONIC_PROJECTS: moviedb/hmdb

. **Verify the result**. The front-page of your app should now display a 404 - as you are back to the originally imported content without a site.
+
Expand All @@ -84,9 +84,9 @@ image:404.png[title="Front page rendering before a site has been added to it", w
TIP: Check the Vercel function logs if you are not getting the expected result.

== Task: Link Content Studio to Vercel
With the front-end running, you can finally link it to Content Studio, and start building pages again.
With the front-end running, you can link it to Content Studio to activate the preview, and start building pages once again.

NOTE: You now have to create your site and tree structure once more, or for convenience, you may export content from your local machine, and importing it to the server using the https://market.enonic.com/vendors/glenn-ricaud/data-toolbox[Data Toolbox app].
TIP: To save time, you may export content from your local machine, and importing it to the server using the https://market.enonic.com/vendors/glenn-ricaud/data-toolbox[Data Toolbox app].

. **Install the Next.XP app** `Solution` -> `Applications` -> `Install` -> Search for `Next.XP`, select it an click install
. **Add configuration**.
Expand All @@ -96,7 +96,7 @@ image:console-configure-app.png[title="Configure the Next.XP application in the
.Add the following lines to the app config field to override the default values:
[source,properties]
----
nextjs.default.url = <Vercel app URL>
nextjs.default.url = <Vercel application URL>
nextjs.default.secret = <yourSecret>
----
+
Expand Down
8 changes: 5 additions & 3 deletions docs/i18n.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ In this chapter you will learn what it takes to support multi-language for your

Next.js has native multi-language support, allowing your projects to switch language on the fly.

To back this, Content Studio has a feature called content layering. This means you can create additional content projects that inherit content from another project, and the inherited items may then be translated and published independently of the parent items.
To back this, Content Studio has a feature called content layering.

== Task: Create a layered project

Expand Down Expand Up @@ -57,6 +57,8 @@ module.exports = {
}
----
+
NOTE: The defaultLocale is the one that will be used to serve content on your domain root `/`, others will be available on /no etc.
+
. *Configure the Enonic adapter*, by specifying which content project to use for each specific locale:
+
..env
Expand Down Expand Up @@ -106,7 +108,7 @@ Finally. By adding `/no` i.e. `localhost:4242/no` to the URL of your Next.js ser

In some cases, you may prefer a setup where each language/market is served by a separate Next.js front-end, or you may simply have different sites accessing the same Enonic instance.

To use different front-ends for previewing different sites, follow these steps:
Setting up Next.js to do this is just like handling a single language. For Content Studio preview to know which Next.js server to use, means some additional configuration.

. *Update the Next.xp configuration file* for your Enonic installation by adding multiple entries:
+
Expand Down Expand Up @@ -135,7 +137,7 @@ image:content-studio-configure-nextxp.png[title="Form with fields for server url

== Accessing locale in views

Here are some tips on how to make further use of locales in Next.js.
Here are some insight on how to make further use of locales in your Next.js project.

When using `getStaticProps` or `getServerSideProps`, `locale` is accessible through the `Context`:

Expand Down
22 changes: 9 additions & 13 deletions docs/static.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,9 @@ In this chapter you will learn about NextJS' static site generation capabilities

== Introduction

Your NextJS front-end is configured to use Static Site Generation (SSG), which basically means you get lightning fast pages.
Your NextJS front-end is configured to use Static Site Generation (SSG), which basically means you get lightning fast pages, but adds an additional compilation build step .

== Static pages

Static Site Generation (SSG) will produce static html + js files, rather than rendering on request. This makes pages load virtually instantly, but adds an additional compilation build step, which may be time consuming.

Extensive documentation on More about
https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation[SSG].
For more information visit the https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation[Next.js SSG documentation].

== Task: Activate prod mode

Expand All @@ -34,7 +29,7 @@ This will take a while longer as when compared to dev mode.

== Task: Fixing preview

With Next.js now running on a different port, which means the Content Studio preview will stop working.
With Next.js now running on a different port, Content Studio preview will stop working.

. Fix the preview by *adding a Next.XP configuration file*, with the following content to your sandbox:
+
Expand All @@ -49,16 +44,17 @@ nextjs.default.url=http://127.0.0.1:4242

. *Verify that the preview is working* in Content Studio.
+
TIP: Even if you are using Static Pages, Content Studio activates Next.js' preview mode, which automatically bypasses static pages, always giiving you a fresh view of your draft content.
TIP: Content Studio uses Next.js' preview mode, which automatically bypasses static pages - giving you a fresh preview of your draft content.

== Task: Test page invalidation
With all pages now being cached as files, Next.js must be instructed to re-generate the pages when a change is published.

*Edit your front-page, and publish the changes*.
This will trigger a revalidation hook, built into the Next.XP app.
This will trigger a revalidation hook, which is built into the Next.XP app.

The page should now get updated at `http://localhost:4242` with your latest changes - more or less instantly.🎉
The page should now get updated at `http://localhost:4242` - more or less instantly.🎉

=== What happens?
=== What happened?

In addition to handling previews, the Next.XP app automatically triggers revalidation of all pages when it detects the publishing event.

Expand All @@ -69,7 +65,7 @@ NOTE: You should also be able to tell from the Next.js log that the revalidation
Static Site Generation is controlled within the content page handler. There are essentially two important functions:

* `getStaticProps()` - instructs Next.js to render static output
* `getStaticPaths()` - This function will be used by Next.js at build time to create a list of pages to compile before the server starts
* `getStaticPaths()` - This function will be used by Next.js at build time to create a list of pages to compile before the server starts.

Below, we explain the details of the code:

Expand Down
7 changes: 5 additions & 2 deletions docs/tldr.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,11 @@ Vercel are the makers of Next.js, and you'll be using their service to host the
. Create a new project i.e. `enonic-demo`, and follow the steps to connect it to the Git repo you created in step 2.
. **Add environment variables** telling the app where to find the API endpoints, as well as a secret you will need to access preview mode in a later step.
+
* ENONIC_API:<API URL>
* ENONIC_API_TOKEN:<yourSecret>
* ENONIC_API: <URL to Enonic API>
* ENONIC_API_TOKEN: <yourSecret>
* ENONIC_PROJECTS: /hmdb/hmdb
+
NOTE: The PROJECTS variable defines which content project, and site to access in Enonic.
+
. After deploying, the Vercel app should render the front page:
+
Expand Down

0 comments on commit bdcd6b9

Please sign in to comment.