189 lines
5.8 KiB
Markdown
189 lines
5.8 KiB
Markdown
# A [NextJS](https://nextjs.org/) template with typescript, tailwindcss and storybook support
|
|
|
|
> The configuration of NextJS, TailwindCSS and Storybook can be **complex** 😰 🤪
|
|
> 👉 So we have decided to make this template public 🎉
|
|
|
|
This project was bootstrapped with [npx create-next-app](https://nextjs.org/learn/basics/create-nextjs-app/setup) and we have added support for:
|
|
|
|
- ✅ [Typescript](https://www.typescriptlang.org/)
|
|
- ✅ [Taillwindcss](https://www.tailwindcss.com)
|
|
- ✅ [Storybook](https://storybook.js.org/)
|
|
- ✅ [Jest](https://jestjs.io/)
|
|
- ✅ [Import SVG as React Component (SVGR)](https://react-svgr.com/) (Thanks to [@neoziro](https://twitter.com/neoziro))
|
|
|
|
You are welcome to contribute to this project to make it better. Contact us at [contact@elitizon.com](contact@elitizon.com)
|
|
|
|
Created with ❤️ by [Elitizon](https://www.elitizon.com)
|
|
|
|
This template is available at [https://github.com/elitizon/nextjs-tailwind-storybook](https://github.com/elitizon/nextjs-tailwind-storybook)
|
|
|
|
## To use this template:
|
|
|
|
- clone it
|
|
- remove the .git folder
|
|
- git init .
|
|
- git add .
|
|
- git commit -m "First commit"
|
|
|
|
## Structure of the template
|
|
|
|
```bash
|
|
.
|
|
├── CODE_OF_CONDUCT.md
|
|
├── CONTRIBUTING.md
|
|
├── LICENSE
|
|
├── README.md
|
|
├── SECURITY.md
|
|
├── build.toml
|
|
├── next-env.d.ts
|
|
├── nextjs.config.js
|
|
├── out
|
|
│ ├── 404.html
|
|
│ ├── _next
|
|
│ ├── favicon.ico
|
|
│ ├── index.html
|
|
│ └── vercel.svg
|
|
├── package.json
|
|
├── postcss.config.js
|
|
├── public
|
|
│ ├── favicon.ico
|
|
│ └── vercel.svg
|
|
├── src
|
|
│ ├── assets
|
|
│ ├── components
|
|
│ ├── pages
|
|
│ └── styles
|
|
├── tailwind.config.js
|
|
├── tsconfig.json
|
|
└── yarn.lock
|
|
|
|
```
|
|
|
|
Pages and components are developed in `src` directory.
|
|
|
|
## Install all the dependencies
|
|
|
|
### 👉 `yarn install`
|
|
|
|
## Available Scripts
|
|
|
|
In the project directory, you can run:
|
|
|
|
### 👉 `yarn dev`
|
|
|
|
**Results:**
|
|
|
|
```bash
|
|
ready - started server on http://localhost:3000
|
|
✅ purgeEnabled=false
|
|
|
|
event - compiled successfully
|
|
event - build page: /next/dist/pages/_error
|
|
wait - compiling...
|
|
event - compiled successfully
|
|
event - build page: /
|
|
wait - compiling...```
|
|
|
|
Run the project in the dev mode.
|
|
````
|
|
|
|
Runs the app in the development mode.\
|
|
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
|
|
|
The page will reload if you make edits.\
|
|
You will also see any lint errors in the console.
|
|
|
|
### 👉 `yarn storybook`
|
|
|
|
Runs storybook.
|
|
|
|
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
|
|
|
|
### 👉 `yarn test`
|
|
|
|
Launches the test runner in the interactive watch mode.\
|
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
|
|
|
> If you get an error that contained this line:
|
|
|
|
Use this command:
|
|
|
|
`brew install watchman`
|
|
|
|
### 👉`yarn build`
|
|
|
|
Builds the app for production to the `.next` folder.\
|
|
It correctly bundles NextJS in production mode and optimizes the build for the best performance.
|
|
|
|
The build is minified and the filenames include the hashes.\
|
|
Your app is ready to be deployed!
|
|
|
|
👉 **Result of execution**
|
|
|
|
```bash
|
|
yarn run v1.22.10
|
|
$ cross-env NODE_ENV=production next build
|
|
info - Creating an optimized production build...
|
|
|
|
|
|
TailwindCSS
|
|
|
|
-----------
|
|
|
|
✅ purgeEnabled=true
|
|
|
|
info - Compiled successfully
|
|
info - Collecting page data...
|
|
info - Generating static pages (0/2)
|
|
info - Generating static pages (2/2)
|
|
info - Finalizing page optimization...
|
|
|
|
Page Size First Load JS
|
|
┌ ○ / 1.55 kB 64.3 kB
|
|
├ /_app 0 B 62.7 kB
|
|
├ ○ /404 3.46 kB 66.2 kB
|
|
└ λ /api/hello 0 B 62.7 kB
|
|
+ First Load JS shared by all 62.7 kB
|
|
├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.d4f570.js 13.1 kB
|
|
├ chunks/framework.abffcf.js 41.8 kB
|
|
├ chunks/main.1fee81.js 6.62 kB
|
|
├ chunks/pages/_app.1315ea.js 523 B
|
|
├ chunks/webpack.50bee0.js 751 B
|
|
└ css/ff7ad52a1259dc7bd680.css 1.88 kB
|
|
|
|
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
|
|
○ (Static) automatically rendered as static HTML (uses no initial props)
|
|
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
|
|
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
|
|
|
|
Done in 9.00s.
|
|
|
|
```
|
|
|
|
See the section about [deployment](https://nextjs.org/docs/deployment) for more information.
|
|
|
|
### 👉`yarn start`
|
|
|
|
Starts a server with the output for the `yarn build` command.
|
|
|
|
`yarn build` must be executed before to use this command.
|
|
|
|
### 👉`yarn export`
|
|
|
|
Export the output of the `yarn build` command execution to the `./out` directory.
|
|
|
|
`yarn build` must be executed before to use this command.
|
|
|
|
### 👉`npx serve ./out`
|
|
|
|
To launch a **static server** from the `./out` directory. This command can be useful to control the outcome of `yarn export`.
|
|
|
|
`yarn build` and `yarn export` must be executed before to use this command.
|
|
|
|
## Learn More
|
|
|
|
You can learn more in the [NextJS documentation](https://nextjs.org/docs/getting-started).
|
|
|
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
|
|
|
To learn how to develop UIs with component and design systems with Storybook, check out the [Learn Storybook documentation](https://www.learnstorybook.com/)
|