server side react with next.js

After trying out next.js, totally lovely this tool, no reason not to use now with server side react render. One of the biggest benefit I felt is definitely the SEO part. As my screenshot below you can see that in source code which renders the contents, this is great for crawlers to quickly crawl your contents to show to the world.

Its really easy to install next.js, you will install like how you usually do with other node projects.

create a project folder, and install all packages you need for your project, including next.js

npm install --save next react react-dom

and edit your package.json with:

{
  "scripts": {
    "dev": "next",
  }
}

Next.js create routes with pages folder, any files inside this folder will be added as a route, so lets create a index.js file, and add some code:

const Index = () => (
  
Hello next.js
); export default Index;

dada!! now you got your first next.js application, of course you can import other modules from other folders which will not compiled as routes.
PS: when I first use next.js I have some compiling problem with bablerc, if you have too, try to add a .babelrc file and add:

{
   "presets": ["next/babel"]
}