"next": "12.2.0"

"react": "18.2.0"

"@storybook/react": "6.5.9"

• How to launch
• What is this?
• Pre-commit
• Conventional Changelog
• Storybook
• Dependencies
• License

1. git clone [email protected]:hotepp/next-story.git next-big-thing: cloning the repo
2. cd next-big-thing: going to the cloned copy of the repo
3. sudo rm -R .git && sudo rm CHANGELOG.md: removing everything git-related from the cloned repo; be careful with sudo, you only want to delete the .git folder with everything inside of it and the CHANGELOG.md file, but nothing more
4. git init: creating our own git system
5. git remote add origin https://github.com/USERNAME/REPOSITORY.git: setting our own repository as the remote origin
6. git add .: adding everything to our first git commit
7. git commit -m "feat(init): project start": making our first git commit
8. npm version minor: start versioning right away and create the CHANGELOG.md file
9. git branch -M main: rename the branch
10. git push -u origin main: pushing our first git commit to the main branch of our repo

P.S. Don't forget to remove the extra info like keywords, repository, packages you won't be using, reset the version etc. in package.json.

1. npm i
2. npm run dev to run the Next.js environment; npm run sb to run Storybook
3. Navigate to http://localhost:3000/ or to http://localhost:4000/, if you run Storybook
4. npm run build to create a production (Next.js) build; npm run build:sb to create a Storybook build
5. npm start to run the created production (Next.js) build

For more info visit Next.js Getting Started.

Next Story or NS is an opinionated version of Create Next App coupled with Storybook.

It contains all the recent Next.js features +

• Basic styles adjustment and some of Bulma modules in src/styles/global and src/styles/misc
• Set of Sass/SCSS mixins and variables in src/styles/includes
• Pre-configured and customizable ESLint, Prettier and Stylelint
• Pre-commit feature with Husky and lint-staged
• next.config.js, which includes eslint-webpack-plugin and stylelint-webpack-plugin
• jsconfig.json, which includes absolute imports
• Automatically generated CHANGELOG.md file using npm version script, if Conventional Commits approach is being used
• The best UI non-framework Storybook! Integrated and configured, while still being optional and flexible just as you always wanted. All the info you need is located right here. And here is what you need to know about Storybook in Next Story.

NS has a pre-commit feature, based on Husky and lint-staged. It looks like this:

lint-staged in package.json:

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "pretty-quick --pattern './src/**/*.{js,jsx,ts,tsx}'",
    "eslint './src/**/*.{js,jsx,ts,tsx}' --fix"
  ],
  "src/**/*.{css,sass,scss}": [
    "stylelint './src/**/*.{css,sass,scss}' --fix"
  ]
}

pre-commit in .husky/pre-commit:

npm run lint

And it can be configured in any preferrable way. Enjoy!

I recommend using the Conventional Commits approach for committing your work to Git. If you use it, your commits will be very descriptive and themselves could tell the story of your project to anyone.

On top of this Conventional Changelog was built. I included the CLI version of it here, in the version npm script. It generates a nice CHANGELOG.md for your nice commits.

The recommended commit approach for using this would be:

1. Make changes
2. Commit those changes
3. Run the npm version [patch|minor|major] command (more about it here)
4. Push

The npm version script will automatically bump the project's version in package.json and commit it, together with our newly generated CHANGELOG.md.

NS has two almost absolutely separated environments being the Next.js one and the Storybook one. The reason we need two of them is that Storybook never was about building websites, it is about showing them, while Next Story being able to show websites is everything about building them.

In order to deliver the best experience possible to our clients and to our non-frontend colleagues we have to make an effort to help them feel welcomed and Storybook does exactly that.

To make it work with NS we had to tweak some Storybook configs, which you can find in the .storybook folder and see and test the changes for yourself.

To find out how to work with NS and Storybook together you can and should browse the example components, which are the part of the initial NS setup. You can run NS and Storybook instances simultaneously to test the things out.

Have in mind, that the way the example components are made with Storybook and NS is only an example. It is something you can use as a starting point, but there is plenty space to make it better and more suitable for your or your project's needs.

You can use either NS or Storybook for the development process, but make sure to check from time to time, that the original Next.js env (environment) works. It is this env you will be using for the production after all, not the Storybook one.

As a final note I want to remind, that it is quite important, nice and useful to have a UI for display purposes, but it is much more important to have a working environment, which gets things done. And it is exactly the purpose of this integration, so while working on the website, don't forget to deliver some stories with it and while working on the stories, don't forget, that the website won't build itself.

"dependencies": {
  "bulma": "^0.9.4",
  "next": "12.2.0",
  "normalize.css": "^8.0.1",
  "react": "18.2.0",
  "react-dom": "18.2.0"
},
"devDependencies": {
  "@babel/core": "^7.18.6",
  "@storybook/addon-actions": "^6.5.9",
  "@storybook/addon-essentials": "^6.5.9",
  "@storybook/addon-interactions": "^6.5.9",
  "@storybook/addon-links": "^6.5.9",
  "@storybook/builder-webpack5": "^6.5.9",
  "@storybook/manager-webpack5": "^6.5.9",
  "@storybook/react": "^6.5.9",
  "@storybook/testing-library": "^0.0.13",
  "@typescript-eslint/eslint-plugin": "^5.30.5",
  "@typescript-eslint/parser": "^5.30.5",
  "babel-loader": "^8.2.5",
  "conventional-changelog-cli": "^2.2.2",
  "css-loader": "^6.7.1",
  "eslint": "^8.19.0",
  "eslint-config-next": "^12.2.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-storybook": "^0.5.13",
  "eslint-webpack-plugin": "^3.2.0",
  "husky": "^8.0.1",
  "lint-staged": "^13.0.3",
  "postcss-loader": "^7.0.0",
  "prettier": "^2.7.1",
  "pretty-quick": "^3.1.3",
  "sass": "^1.53.0",
  "sass-loader": "^13.0.2",
  "style-loader": "^3.3.1",
  "stylelint": "^14.9.1",
  "stylelint-config-standard-scss": "^4.0.0",
  "stylelint-order": "^5.0.0",
  "stylelint-webpack-plugin": "^3.3.0",
  "typescript": "^4.7.4",
  "webpack": "^5.73.0"
}

Copyright © Vlad Gerasimovich [email protected] (Next Story)

Copyright © Vercel, Inc. (Create Next App)

Copyright © Kadira, Inc. [email protected] (Storybook)

Licensed under the ISC license.