Giter Club home page Giter Club logo

next-project's Introduction

NextJS boilerplate

Prerequisites:

  • nodeJS > 12.X.X

Installing / Getting Started:

Development:

  • Clone repo => git clone repo-url
  • cd premium-line
  • Install dependencies => yarn install
  • Start the development server => yarn dev

Open http://localhost:3000 in your browser to see the app.

Has the following setup:

  • Redux, redux thunk, redux logger (development), redux dev tool (development)
  • PropTypes
  • Prettier (for code format)
  • Font awesome 5
  • SCSS
  • Layout using bootstrap grid system
  • 4 break points

Notes regarding NextJs environment variables:

  • By default all environment variables loaded through .env.local are only available in the Node.js environment, meaning they won't be exposed to the browser.
  • In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_. For example:
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
  • In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time. This means that process.env is not a standard JavaScript object, so you’re not able to use object destructuring. Environment variables must be referenced as e.g. process.env.NEXT_PUBLIC_PUBLISHABLE_KEY, not const { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env.

Configuring Prettier

This build relies on Prettier formatter to enforce a code style. You can find steps on how to setup prettier formatter with WebStorm/PhpStorm here. Please refer to other tutorials if you are using a different IDE.

Notes:

  • It's better to use the local node_modules version of prettier instead of a global one. This is to avoid version conflicts (in case the globally installed version does not match with the versions specified in package.json). So when setting up the file watcher when you follow the steps from the above link you can set program to $ProjectFileDir$\node_modules\.bin\prettier (warning this assumes that node_modules sits in the root of your project. This will need to change if your directory structure changes).
  • You will have to create two file watchers. One for JSX files and one for JS files. The webpack build tools are already configured to work with eslint and prettier. The only thing needed is the two file watchers.

Available Scripts

In the project directory, you can run:

yarn dev

Starts a development server and watches for changes.

yarn build

Builds the application for production usage.

yarn start

Starts Next.js production server. Note: you need to run yarn build in order to be able to run yarn start

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

next-project's People

Contributors

donadam2 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.