|
| 1 | +# Boilerplate |
| 2 | + |
| 3 | +## Next.js, TailwindCSS, Jest, Node.js |
| 4 | + |
| 5 | +Boilerplate Includes folder for components, data, layouts, utils, pages, and scripts. Not pre-configured for any specific sort of site. Just setup for an all-around development environment without having to delete any useless code. There is a default 404 page. I've included dependencies for MDX (gray-matter, remark, remark mdx, date-fns), but they aren't used on any of the pages and can be removed from the json if unnecessary for the project. Testing is setup for Jest and Cypress. |
| 6 | + |
| 7 | +Here are some of the core dependencies and features: |
| 8 | + |
| 9 | +- [Next.js](https://nextjs.org/) - The React Framework |
| 10 | +- [React.js](https://reactjs.org/) - JavaScript Library For Building User Interfaces |
| 11 | +- [TailwindCSS](https://tailwindcss.com/) - PostCSS Framework |
| 12 | +- [Jest](https://jestjs.io/) - JavaScript Testing Framework that uses a fake DOM for unit testing |
| 13 | +- [Cypress](https://www.cypress.io/) - Cypress is a test runner that uses a browser and is used for End-to-End (E2E) and Integration Testing. |
| 14 | +- [SWC](https://swc.rs/) - For minificiation. Included in `create-next-app`. 20x faster than Babel on a single thread and 70x faster on four cores. |
| 15 | +- [SWR](https://swr.vercel.app/) - React Hooks for Data Fetching. Highly recommended if you’re fetching data on the client side. It handles caching, revalidation, focus tracking, refetching on interval, and more. |
| 16 | +- [Node.js](https://nodejs.dev/) - Cross-platform JavaScript run-time environment |
| 17 | +- [Prettier Plugin](https://prettier.io/) - Formatting |
| 18 | +- [Heroicons](https://heroicons.com/) - Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS for React and Vue |
| 19 | +- [PurgeCSS](https://purgecss.com/plugins/postcss.html) - Removed unused CSS. |
| 20 | +- [ESLint](https://eslint.org/) - Find and fix problems in JavaScript |
| 21 | +- [classnames](https://github.com/JedWatson/classnames) - Simple library that lets you toggle class names easily |
| 22 | +- [MDX Ready](https://mdxjs.com/) - Write JSX directly in your markdown files. Use .mdx extension insead of .md |
| 23 | + - [gray-matter](https://github.com/jonschlinkert/gray-matter) - For adding Frontmatter to MDX files |
| 24 | + - [Remark](https://www.npmjs.com/package/remark-package-dependencies) - Inject to markdown the list of dependencies of your package |
| 25 | + - [Remark MDX](https://www.npmjs.com/package/remark-mdx) - Remark plugin to support the MDX syntax |
| 26 | + - [date-fns](https://date-fns.org/v2.16.1/docs/format) - Return the formatted date string in the given format |
| 27 | +- [site-map](https://github.com/iamvishnusankar/next-sitemap) - Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages. |
| 28 | +- [robots.txt](https://developers.google.com/search/docs/advanced/robots/intro) - Tells search engine crawlers which URLs the crawler can access on your site. |
| 29 | + |
| 30 | +### To Use |
| 31 | + |
| 32 | +Click `Use Template` |
| 33 | + |
| 34 | +Install Dependencies `npm i` |
| 35 | + |
| 36 | +Run Development Server `npm run dev` |
| 37 | + |
| 38 | +Erase main content of index.js. |
| 39 | + |
| 40 | +Edit info on package.json |
| 41 | + |
| 42 | +#### Components Folder |
| 43 | + |
| 44 | +- Header: Blank page |
| 45 | +- Footer: Blank page |
| 46 | +- Navbar: Blank page |
| 47 | +- SEO: Blank page |
| 48 | + |
| 49 | +#### Data |
| 50 | + |
| 51 | +- |
| 52 | + |
| 53 | +#### Layouts |
| 54 | + |
| 55 | +- layout.js |
| 56 | + |
| 57 | +#### Lib |
| 58 | + |
| 59 | +- |
| 60 | + |
| 61 | +#### Pages |
| 62 | + |
| 63 | +- \_app.js |
| 64 | +- \_document.js |
| 65 | +- index.js |
| 66 | +- /api |
| 67 | + |
| 68 | +#### Public |
| 69 | + |
| 70 | +- [Images Folder] |
| 71 | +- Use for all static content like .jpgs |
| 72 | + |
| 73 | +#### Scripts |
| 74 | + |
| 75 | +- |
| 76 | + |
| 77 | +#### Styles |
| 78 | + |
| 79 | +- global.css - For Global Styles using TailwindCSS |
| 80 | + |
| 81 | +#### Config Files & JSON |
| 82 | + |
| 83 | +jest.config |
| 84 | +next.config |
| 85 | +costcss.config |
| 86 | +prettier.config |
| 87 | +tailwind.config |
| 88 | +eslintrc.json |
| 89 | +package.json |
| 90 | +tsconfig.json - currently only using typescript in jest.config |
| 91 | + |
| 92 | +- note: will change jest config to .js |
| 93 | + |
| 94 | + "dependencies": { |
| 95 | + "@heroicons/react": "^1.0.6", |
| 96 | + "@mdx-js/loader": "^2.1.2", |
| 97 | + "@next/mdx": "^12.2.4", |
| 98 | + "@tailwindcss/typography": "^0.5.4", |
| 99 | + "classnames": "^2.3.1", |
| 100 | + "date-fns": "^2.29.1", |
| 101 | + "eslint-plugin-prettier": "^4.2.1", |
| 102 | + "gray-matter": "^4.0.3", |
| 103 | + "next": "latest", |
| 104 | + "next-remote-watch": "1.0.0", |
| 105 | + "react": "latest", |
| 106 | + "react-dom": "latest", |
| 107 | + "react-is": "^17.0.2", |
| 108 | + "react-router-dom": "^6.3.0", |
| 109 | + "remark": "^14.0.2", |
| 110 | + "remark-html": "^15.0.1", |
| 111 | + "remark-mdx": "^2.1.2", |
| 112 | + "styled-components": "^5.2.3", |
| 113 | + "swr": "^1.3.0", |
| 114 | + "ts-node": "^10.9.1" |
| 115 | + }, |
| 116 | + "devDependencies": { |
| 117 | + "@fullhuman/postcss-purgecss": "^4.1.3", |
| 118 | + "@types/jest": "^28.1.6", |
| 119 | + "@types/node": "^18.6.5", |
| 120 | + "@types/react": "^18.0.17", |
| 121 | + "@types/styled-components": "5.1.25", |
| 122 | + "autoprefixer": "^10.4.8", |
| 123 | + "eslint": "^8.2.0", |
| 124 | + "eslint-config-airbnb": "19.0.4", |
| 125 | + "eslint-config-next": "12.2.4", |
| 126 | + "eslint-config-prettier": "^8.5.0", |
| 127 | + "eslint-plugin-import": "^2.25.3", |
| 128 | + "eslint-plugin-jsx-a11y": "^6.5.1", |
| 129 | + "eslint-plugin-react": "^7.28.0", |
| 130 | + "eslint-plugin-react-hooks": "^4.3.0", |
| 131 | + "jest": "^28.1.3", |
| 132 | + "postcss": "^8.4.16", |
| 133 | + "postcss-preset-env": "^7.7.2", |
| 134 | + "prettier": "^2.7.1", |
| 135 | + "prettier-plugin-tailwindcss": "^0.1.13", |
| 136 | + "tailwindcss": "^3.1.8", |
| 137 | + "ts-jest": "^28.0.7", |
| 138 | + "typescript": "^4.7.4" |
0 commit comments