akd-io/create-next-stack

Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.

Hello! 👋

My name is Anders and I am from 🇩🇰Copenhagen, Denmark. I am a passionate frontend engineer obsessed with improving software development projects, from enhancing user and developer experience to increasing maintainability and agility.

I have spent the last 5 years consulting as a frontend web developer for a dozen different companies. I have worked with many teams, technologies, and processes and love the ever-changing environment's many learning opportunities.

Whether you are looking for a frontend lead to lay a good foundation for your next web development project or an experienced React developer to help finish the last user stories before the deadline, LinkedIn is the place to get in touch.

Create Next Stack 🚀

Check out Create Next Stack, an open-source website and CLI tool that helps frontend teams get Next.js projects set up in minutes instead of days.

create-next-stack's Issues

Add default options e2e test

First step towards #58

More addons

Can you please add these addons:

• tailwindcss
• nightwindcss
• typescript
• no css toggle
• heroicons/react

Add support for GitHub Actions

Add support for Chakra UI

https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui

Make sure mrm is only installed temporarily

Add support for Storybook

Storybook

To do:

• Determine best way to deal with Storybook 6 & Emotion 11 incompatibility

Add support for performance monitoring and error reporting

To do:

• #217
• #218
• #219

Make first "Create Next Stack" occurrence in Readme link to website

Add support for Tailwind CSS

https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

Add support for SASS

Just install sass: https://nextjs.org/docs/basic-features/built-in-css-support#sass-support

Build Create Next Stack website

Add opt-out option

Hey, what if I want to spin up a project, but don't need a form library?
For whatever reason. I thought, maybe an opt-out here would be a good idea.

What do you think?

Remove questionnaire to simplify architecture for the time being

Add CLI options for every setup option

Add support for plain JavaScript (No TypeScript)

To make it as easy as possible I've been toying with the idea of renaming and transpiling the TypeScript files to JavaScript to strip them of their types.
Other than that:

• create-next-app should be called without the --typescript flag.
• All ".ts" and ".tsx" extension references in generated code and config files should be updated to support both JavaScript and TypeScript. (This will make it easier for users to add TS support later)

Update generated footer to point to website instead of GitHub

Test for unmet peer dependencies

Add a test to check for unmet peer dependencies after project setup.

Make CI cancel/skip unnecessary workflows

Add CLI screenshot to readme

Make Continuous Integration options mutually inclusive

Change to scalable design of generated content

Problem

Create Next Stack currently generates a custom landing page using the styling method the user provides. This provides the best experience for users but puts a big burden on maintainers and therefore won't scale very well.

Solution

I propose the following solution:

• pages/index.tsx will render templates/LandingPage/LandingPage.tsx, so all the user has to do to delete the generated React code is deleting the templates directory and edit pages/index.tsx.
• The templates/LandingPage directory will hold LandingPage.tsx as well as:
  • Technology section components, providing examples for all installed technologies, located at templates/LandingPage/**/*.tsx
  • CSS Modules co-located with each component, that is, at templates/LandingPage/**/*.module.css

Research if CNS should install peer dependencies automatically

Research if CNS should install peer dependencies automatically and if so, how.

Don't include custom Babel unless necessary

Awesome project 😄 I saw this:

{
  "presets": [["next/babel", {}]],
  "plugins": []
}

Which doesn't need to be created unless necessary 👍

Add support for testing libraries

Testing libraries to support:

• #220
• #221
• #222
• #223
• #224

Add GitHub Actions to readme files

Support pnpm

Note: create-next-app added the --use-pnpm flag in vercel/next.js#34947

Streamline CLI output

• Make use of chalk to highlight important details
• Make use of listr?
• Use [INFO], [DEBUG], [WARN] and [ERROR]-level logs.
  • In turn change the --debug flag to enable [DEBUG]-level logs instead of current behavior.

Turn questionnaire into a series of inquiries

The current questionnaire exists of one large inquirer.prompt()-call.
Turn this into a series of prompts instead to streamline the user experience.

• Turn questionnaire into a series of prompts
• Substitute assets/screenshot.svg with a video

Add support for NPM

Support React Icons

https://react-icons.github.io/react-icons/

CLI: Make tests run in parallel

All e2e tests are currently running in sequence because simultaneous calls to npm i -g yarn (--package-manager=yarn) or npm install -g mrm@^3.0.0 mrm-task-lint-staged@^6.0.0 (--package-manager=npm) cause crashes.

Add support for CMSs

CMSs to support:

• #213
• #214
• #215
• #216

Bug in Github Action CI workflow job title

The title of the format-lint-etc job of the generated GitHub Action workflow includes "Formatting", even if left out of the .yml file.

Add support for styled-components

Add e2e tests

Add support for 3rd party component libraries

Component libraries to support:

• Material UI (#111)
• Mantine (#202 & #210)
• #211
• #212
• more?

Add support for VSCode extension recommendations

Generate VSCode extension recommendations

To do:

• Add extension recommendations to README.md
• Add extension recommendations to .vscode/extensions.json
• Make sure that if several extensions recommends the same extension, it'll only be added once.
• Consider looking through other loops extracting data from plugins, can make sure all these loops filter out duplicates where relevant.

Plugin extensions to be supported:

• Prisma: prisma.prisma
• Prettier: esbenp.prettier-vscode
• ESLint: dbaeumer.vscode-eslint
• GitHub Actions: github.vscode-github-actions
• GitHub Copilot: github.copilot
• Styled Components & Emotion: styled-components.vscode-styled-components
• CSS Modules: clinyong.vscode-css-modules
• .env: irongeek.vscode-env

Add Twitter shield badge

Add support for Redux

https://redux.js.org/introduction/getting-started

Add support for server state management libraries

Server state management libraries to support:

• #198
• #199
• #200

Add major versions to all yarn install commands

CLI: Add technology usage examples

When the user first runs yarn dev or similar, they should be greeted with a list of example usages of each of the technologies they added.

This will also enhance our testing confidence a lot. Primarily because these examples would be tested automatically by the build & lint test that's currently run. But it will also enable us to copy over and run Cypress or React Testing Library tests on the generated examples in future tests.

Technologies to generate a content section for:

• Next.js
• React
• TypeScript
• ESLint
• Package manager:
  • Yarn
  • npm
• Styling:
  • Emotion
  • Styled Components
  • Tailwind CSS
  • CSS Modules
  • CSS Modules + Sass
• Component Libraries:
  • Chakra UI
  • Material UI
• Form libraries
  • React Hook Form
  • Formik
• Framer Motion
• Prettier
• Husky
• Lint Staged
• GitHub Actions

ESLint: Remove oclif rules, and add recommended typescript rules.

Add support for app-name CLI argument

Create Next App allows typing:

npx create-next-app my-app

We need to support the same.

Fix `cd .` in output when running `create-next-stack .`

When using the appName ., the CLI will write the following on a successful run:

Successfully created project app-project-directory!

To get started, run:

    cd .
    yarn dev

The cd . command is unnecessary and should be removed.

Set up publish.yml

Support multithreading

In my line of work I constantly create new next stacks and it would help a lot if your tool would allow for creating multiple projects concurrently.

Add support for Nightwind

This issue tracks support for Nightwind as requested in #123.

Remove ColorModeProvider in generated _app.tsx

Website: Make it clear what technologies are currently required