To create a new project follow these comands:

1. Create nextjs app with tailwind: (SEE: Next.js, & Tailwind CSS)
npx create-next-app -e with-tailwindcss name-of-app

OPTIONAL: By default a javascript project is created, you can create a typescript if you prefer with the following commands:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

 

2. Out of the box, without configuration, Next.js compiles CSS using PostCSS.
$ npm install -D tailwindcss autoprefixer postcss

3. Start Development Server:
$ npm run dev

4. Open application in browser:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

5. Build your app
$ npm run build

  • This will build a .next directory. If you need to create a custom directory such as as a build/ directory, See instructions how to setup custom build directory  and Deploy your build
  • You can specify the name of the .next directory to use instead of build for example, to do so, open next.config.js and add the distDir to module.exports:
  • module.exports = {
      reactStrictMode: true,
      distDir: 'build',
    }
  • Build to a static host: (example: index.html) To create a static build with nextjs, you will have to perform a couple of extra steps: More help on Static HTML Export
  • Open package.json and change build to:
  • "build": "next build && next export",
  • Now when you run npm run build, it will create a out directory which contains an index.html file and all the necessary files.

6. Run your build on whatever you choose:
$ npm run start -p 8080

 Available Templates:

https://github.com/edwinaquino/react-nextjs-bootstrap-5-starter-template

https://github.com/edwinaquino/Bootstrap-5.1-Starter-HTML-Template

https://github.com/edwinaquino/Bootstrap-4-Starter-HTML-App

https://github.com/edwinaquino/nodejs-javascript-starter