next-starter
This is a Next.js project bootstrapped with create-next-app.
After bootstrapping, the following was added:
- TypeScript support for modern ECMAScript features.
- The files
.env.{development,production}to set environment variables. - Prettier for code formatting.
- SCSS support for modern CSS features.
-
Stylelint for linting
.scssfiles.cla - The
classnameslibrary to conditionally joinclassNamevalues. -
commitlintto enforce conventional commit messages. -
huskyandlint-stagedto automatically trigger linting before commits. - A simple example blog application.
- Custom
404and500error pages. - A development container.
- Progress Web App support using
next-pwa. - Jest and react-testing-library for testing.
- Netlify CMS for content management.
- Travis CI configuration.
Getting Started
First, clone and install the dependencies:
npx @garyblackwood/next-starter my-app
cd my-app
npm run installNext, run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
To start the CMS server:
npm run cms-serverTo perform static analysis:
npm run lintTo run tests:
npm testTo build for production:
npm run buildCustomisation Checklist
Run through this checklist to customise the application for your needs:
- [ ] Update the
name,description,homepage,repository,keywordsandbugsfields inpackage.json. - [ ] Update site metadata within the
<Head>component incomponents/layout.tsx. - [ ] Update the application configuration in
lib/config.ts. - [ ] Update
name,short_name,theme_colorandbackground_colorinpublic/site.webmanifest. - [ ] Replace
public/favicon.icoandpublic/icon.pngetc. - [ ] Update the environment variables in
.env.{development,production}. - [ ] Remove unnecessary dependencies from
package.jsone.g.gray-matter,remark,remark-html,date-fns - [ ] Change the license in
package.jsonandLICENSEif needed. - [ ] Update the CMS configuration in
public/admin/config.yml. - [ ] Update the contents of this file.
- [ ] Start working on your application!
Directory Overview
| Directory | Description |
|---|---|
| __tests__ | The Jest unit tests. |
| .devcontainer | The development docker container configuration. |
| .husky | The git hooks scripts. |
| components | The app's reusable components. |
| lib | The app's service-like code. |
| package | Contains the package installation script. |
| pages | The app's page components. |
| posts | The markdown files for each example blog post. |
| public | Services static content from the root /. |
| styles | The app's CSS. |
Learn More
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.