This is a boilerplate template for Next.js ♥ app which I build according to needs of my clients small websites. I personaly use this template for Static Generation.
- Next.js - The React Framework for Production (docs)
- Tailwind - a utility-first CSS framework (docs)
- Basic Prettier setup - an opinionated code formatter (docs)
- PostCSS set up with autoprefixer and tailwind plugins (docs)
- complete implementation of Google Analytics
- often used utils (
submit formhelper,sass breakpointstool,img srcset generator- Nexts Image component is only available for server rendering)
- setup your own SASS breakpoints (if you are gonna use it)
- change website icons (in public/assets/icons)
- change description/colors meta in CustomHead
- include your own fonts in public/fonts/your font folder
- change Google Analytics ID in .env (development) and .env.production, as default sample Google ID is used
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
For start development
npm run devOpen http://localhost:3000 with your browser to see the result.
For build, which will also generate an out directory, which can be served by any static hosting service or CDN.
npm run buildFiles after build you can find in root out folder and copy it by FTP on your server or DNS.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.