Back to templates

Template details

Next.js Starter

A starter project for Next.js with authentication via Passport, Bootstrap 4, and deployment examples.

About this template

Next.js Starter is a boilerplate project that combines Next.js, Express, and Passport JS to produce a React application with authentication, account management, and Bootstrap 4 styling out of the box. This archived repository, created by Iain Collins, targets developers who want to skip the setup of universal React apps and begin with a working example that covers both client and server rendered pages.

What is the Next.js Starter project?

The Next.js Starter project is a starter kit for React built on the Next.js framework, which renders pages on both client and server without manual webpack or babel configuration. It takes a fresh Next.js app and adds an Express server with Passport JS middleware for authentication via Email, Facebook, Twitter, and Google+, plus session handling with HTTP-only cookies and CSRF tokens. The project produces a deployable Node.js application with a live demo hosted at https://nextjs-starter.now.sh and is archived and no longer maintained as of the notice on the repository.

Key Features

  • Authentication providers — Supports Email, Facebook, Twitter, and Google+ through Passport JS, with setup instructions in AUTHENTICATION.md and Twitter recommended as the easiest to configure.
  • Account management — Users can update their details, link or unlink social accounts, and delete their account from the included UI templates.
  • Secure sessions — Uses Express with HTTP-only cookies and CSRF tokens to protect session state.
  • Bootstrap 4 and Reactstrap — Styling is implemented with SASS/SCSS and Bootstrap 4 via Reactstrap, including Bootstrap components for React.
  • Ionicons icon font — Bundled icon set that demonstrates how to include additional CSS and font files in a Next.js project.
  • REST API examples — Sample code shows how to pull data from remote REST APIs inside Next.js pages.
  • Development and production scripts — npm run dev starts a local server, npm run build compiles for production, and npm start runs the built site.

Who is it for?

  • React developers new to Next.js can clone the repository and run npm install && npm run dev to get a universal React app with routing and authentication already configured.
  • Developers building authenticated apps can use the Passport integration as a reference or base for adding oAuth and email login to their own Next.js projects.
  • Teams evaluating deployment options can follow the included guides for deploying to Zeit's now.sh, Heroku, AWS, Google Cloud, Azure, and DigitalOcean.

What can you do with it?

  • Indie developers: Launch a proof-of-concept web app with email and social login in a few minutes by cloning the repo and configuring the .env file.
  • Full-stack learners: Study how Express middleware, Passport strategies, and Next.js pages integrate in a single Node.js codebase.
  • Prototype builders: Use the account management and session boilerplate as the foundation for a subscription dashboard or member-only content site.

How does it work?

To run locally, clone the repository, run npm install (using --no-optional on Windows to skip fsevents), and then npm run dev. For production, run npm run build followed by npm start; an environment variable such as PORT=3000 can override the default port. Deployment to now.sh is done with the now command, optionally passing -E to include environment variables from a .env file.

Pros and cons

  • Works out of the box — Includes a live demo, so you can see the auth flow and UI before writing any code.
  • Outdated dependencies — The project is archived, so bootstrap and other packages are no longer updated, and the now.sh deployment instructions target Now 1.0 rather than the current Now 2.0 platform.

Alternatives

The project itself points to two maintained resources: the official Next.js examples repository at https://github.com/vercel/next.js and NextAuth.js at https://next-auth.js.org, which offers an example project with a live demo at http://next-auth-example.now.sh.

FAQ

Is the Next.js Starter project free?

Yes, the repository is open source on GitHub under the nextjs-starter name and can be cloned, copied, and used as the base for your own projects.

What authentication providers are supported?

It supports email login plus oAuth via Facebook, Twitter, and Google+. Setup steps for each provider are documented in AUTHENTICATION.md, with Twitter listed as the quickest to get working.

Is the Next.js Starter project still maintained?

No, the repository is archived and no longer maintained. The maintainer recommends using the official Next.js examples and NextAuth.js for up-to-date patterns, because features like CSS support and API routes are now built into Next.js itself.

screenshot of Next.js Starter on template0.com