Home

Awesome

Vulcan Next

Vulcan Next helps you build GraphQL-based applications with Next.js.

<picture> <source srcSet="https://raw.githubusercontent.com/VulcanJS/vulcan-next/devel/public/img/vn-logo-full-padded-dark-840.png" media="(prefers-color-scheme: dark)"/> <img src="https://raw.githubusercontent.com/VulcanJS/vulcan-next/devel/public/img/vn-logo-full-padded-840.png" alt="vulcan-next banner" /> </picture>

What's in the box?

Where Vulcan Next shines:

Vulcan Next provides:

Join the Slack and meet Vulcan contributors

Join the new Discord and meet Vulcan contributors

Get started with the live tutorial

Read the introductory article on FreeCodeCamp

Check the full documentation

A word about the core team and sponsoring

You can't teach an old dog new tricks! Vulcan Next is the successor of "Vulcan.js", the Meteor framework from Sacha Greif. It inherits years of experience, with a modernized architecture that replaces Meteor by Next.js.

Vulcan Next powers the Devographics surveys State of JS, State of CSS and State of GraphQL.

Not familiar with Next.js yet? You can join the Next.js course at Human Coders from Eric Burel, 3 days to understand the inner workings of Next.js router, server and static rendering, edge middlewares and all their friends.

Want to help us building high quality boilerplates? You can sponsor Vulcan on Open Collective or reach us out for bounties and freelance work (ping us on Vulcan slack or Discord).


Install and run in 5 minutes

Pro tip: you can test Vulcan Next with zero install by cloning it on CodeSandbox.

If you prefer a local install:

git clone -b main https://github.com/VulcanJS/vulcan-next
cd vulcan-next
yarn
yarn run dev

Open http://localhost:3000 in your browser. You can then access the live tutorial on http://localhost:3000/learn.


Next steps

Setup your own git repository

When creating your own application, you'll want to host the code on your own Git repository (on GitHub, BitBucket, etc.).

Point git to your own repository

Rename "origin" to "upstream", so you can use your own git repository as the main "origin", and VN official repo as "upstream".

git remote rename origin upstream
# Then do what you need to create your own origin remote
# git remote add origin <your-own-git-repository-url>

Roll your own Mongo database

As a default, Vulcan Next will connect to a sample read-only database owned by LBKE. To create your own application, you'll want to use your own databse.

0. I am a Windows user (if using Mac or Linux skip to 1.)

If you use Windows, you might want to either:

1. Run a Mongo server using Docker

It will run Mongo in your current terminal, or create and run a Mongo image if it's the first time your run the command.

Note: you should always start your database before you run the application.

yarn run start:mongo

See Docker installation instruction for Ubuntu here if you don't have Docker yet.

2. Configure your application to use your local database

In .env.development or .env.development.local use this URI for Mongo:

MONGO_URI="mongodb://localhost:27017/vulcan-next-app"

You can then stop the server and start it again.

We advise to use MongoDB Compass to visualize your database content.

Update your app to the latest version of Vulcan Next

Beware: Vulcan Next is a boilerplate, the possibility to update automatically is not guaranteed. You may have to apply the updates by hand, comparing Vulcan Next latest version to your own code. Always double-check that the merge didn't break your app!.

# Get the latest version of Vulcan Next locally
git fetch upstream
# Merge to your own code (favouring your own code as a default in case of conflict)
git merge upstream/main -X ours

Contribute or raise an issue

This starter is read-only! Please avoid opening pull requests against it.

All developments happen in our monorepo "Vulcan NPM" here.


They support Vulcan Next and Vulcan Meteor

Contributors

This project exists thanks to all the people who contribute.

<a href="https://github.com/VulcanJS/vulcan-next/graphs/contributors"><img src="https://opencollective.com/vulcan/contributors.svg?width=890&button=false" /></a>

Backers

Thank you to all our backers! 🙏 [Become a backer]

<a href="https://opencollective.com/vulcan#contributors" target="_blank"><img src="https://opencollective.com/vulcan/backers.svg?width=890"/></a>

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

<a href="https://opencollective.com/vulcan#contributors" target="_blank"><img src="https://opencollective.com/vulcan/sponsors.svg?width=890"/></a>

Technical supports

They give time and share knowledge to support the project.

<a href="https://aplines.com" target="_blank" rel="noopener noreferrer"> <img src="https://aplines.com/wp-content/uploads/2022/03/cropped-aplines-logo.png" alt="aplines" height="75"/> </a> <a href="https://www.lbke.fr" target="_blank" rel="noopener noreferrer"> <img src="https://www.lbke.fr/img/logo-md.png" height="75" alt="lbke" /> </a> <a href="https://letter.so/" target="_blank" rel="noopener noreferrer"> <img src="https://github.com/VulcanJS/vulcan-next/blob/devel/public/img/letter-96x96.png?raw=true" height="75" alt="lette.so" /> </a>

Other cool Next stuff


About Next.js

This is a Next.js project bootstrapped with create-next-app.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!


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.

Powered by Vercel