Using Next JS in Stringland Tech

Next JS - Server Side Generation

Previously Stringland Tech used React JS, which caused an issue: Google could only index home page. That is because other pages are generated on the fly when browsers visit their links, which make it hard for search engine to add them into index.

To do the SEO (search engine optimization) so that Stringland Tech is easier to find by everyone, while without making too much code changes, we rewrite the whole front end side using Next JS. Next JS support web pages server side rendering. It means that every pages have their own static html files and they can be easily collected by search engine and added to index.

Another reason to choose Next JS is that it is based on React JS. Stringland tech front end code change scope can be reduced.

Here is the Next JS wiki page. 

And here is Next JS official pages.

 

How to Migrate from React JS

Next JS official document has complete guideline.

Actually the basic idea is simple: For routing and redirection, just follow Next JS coding practice. This part cannot be reused from React JS. But for React JS components, we only need to migrate all the code without any changes to the Next JS project, and then write Next JS pages with importing those components. That is it.

How to Deploy Next JS App in Github Web Server

Currently Stringland Tech front end is running on github.io. To deploy Next JS app on github.io, there are some extra steps compared to React JS app.

Here is a useful and complete guideline.

Here we just put some extra steps compared to deploying React JS app:

1.In package json, define the predeployment behavior as below:

  

"predeploy": "npm run build && npm run export && touch out/.nojekyll ", 

 

The reason is that Next JS has to build all the static pages/files (HTML, js ....) before uploading them to the server. And all those files should be exported to out folder. And the .nojakyll file is needed otherwise css may not work.

2.In next.config.js file, add following content:

const isProd = process.env.NODE_ENV === "production";

module.exports = {
  /**
   * Tell Next.js where the `public` folder is.
   * Replace `nextjs-github-pages` with your Github repo project name.
   */
  assetPrefix: isProd ? "" : "/web",
};

The reason is that without this config, some assets (like logo, sitemap and etc) may not be found by Next JS.

3. After running the npm run deploy command, the .nojekyll file may still be missing in github repository. In that case, please manually create that file and leave the content empty.