0.1.4 • Published 3 years ago
@garyblackwood/next-starter v0.1.4
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
.scss
files.cla - The
classnames
library to conditionally joinclassName
values. commitlint
to enforce conventional commit messages.husky
andlint-staged
to automatically trigger linting before commits.- A simple example blog application.
- Custom
404
and500
error 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 install
Next, run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
To start the CMS server:
npm run cms-server
To perform static analysis:
npm run lint
To run tests:
npm test
To build for production:
npm run build
Customisation Checklist
Run through this checklist to customise the application for your needs:
- Update the
name
,description
,homepage
,repository
,keywords
andbugs
fields 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_color
andbackground_color
inpublic/site.webmanifest
. - Replace
public/favicon.ico
andpublic/icon.png
etc. - Update the environment variables in
.env.{development,production}
. - Remove unnecessary dependencies from
package.json
e.g.gray-matter
,remark
,remark-html
,date-fns
- Change the license in
package.json
andLICENSE
if 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.