NextJS Starter is a starter project containing every configurations you might want for your PWA Ready NextJS app.

The installation only requires to download the project dependencies through npm or yarn running:

$ cd nextjs-starter
$ npm install

Or

$ cd nextjs-starter
$ yarn install

$ yarn dev-hot

Or

$ npm run dev-hot

$ yarn dev

Or

$ npm run dev

For production, you first need to create an SSL certificate for your domain. The fastest and most inexpensive option is to use Let's Encrypt. When you're done producing your SSL certificate, make sure that your domain is defined in config/server.js. You can modify this file the following way :

const serverConfig = {
  domain: 'mydomain.com' // <-- your domain name here
}

$ yarn prod

Or

$ npm run prod

Make sure that you have forever installed globally, then run :

$ yarn start-prod

Or

$ npm run start-prod

The following lines :

const picture = require('../static/my-picture.jpg')
console.log(picture)

Will produce the following result :

"...jpg"

If you want to lazy load your images, note that the production environment will generate placeholders, see the production section for more infos.

The following lines :

const picture = require('../static/my-picture.jpg')
console.log(picture)

Will produce the following result :

{
  src:{
    preview:'data:image/svg+xml...'
    src:'...jpg'
  },
  trace:'data:image/svg+xml...'
}

The trace and the preview are light svg files meant to be used as placeholder during pictures lazy loading. The trace is a flat shape which you can define the color in the project webpack settings. The preview is a blur version of your picture. The src is the normal url of your file.

Don't be surprised if the placeholders are not working in development, they are disabled on purpose to keep the hot reloading fast.