This is a Next.js project starter with dev dependencies only. It saves your time on initial setup and can be used for any kind of project. Based on the basic create-next-app
starter.
- Typescript
- ESLint config that works well with Prettier and Typescript
- opinionated project structure
- testing environment
- import aliases with auto-sorting
- pre-commit hooks with husky and lint-staged
- CSS reset and globals
- bundle analyzer
- format and lint on save (for VSCode)
- Clone this repository:
git clone git@github.com:codenuru/cn-moviedb.git --depth=1
- Install dependencies:
cd cn-moviedb
yarn
- Before beginning, please make sure you have the following enviroment variable set.
-
copy to ".env.example" to ".env.local". you don't need to set variables Next.js has built-in support for loading environment variables.
cp .env.example .env.local
-
dev
- start development server on http://localhost:3000build
- create a production buildstart
- start serving production buildtype-check
- run Typescript checkslint
- run lint checkstest-all
- runs lint and type checkinganalyze
- analyze production build with Webpack Bundle Analyzer
src/
+-- assets/
+-- components/
+-- constants/
+-- hooks/
+-- layout/
+-- pages/
+-- styles/
+-- typings/
+-- utils/
+-- views/
assets/
- media files (may require additional webpack loader configuration)
components/
- reusable React components shared between views
constants/
- files containing constant values and configs
context/
- context provider components that use React Context API and render children
hooks/
- reusable custom hooks
layout/
- building blocks of the layout structure: header, footer, sidebars etc.
pages/
- directory with a file-based routing that contains pages and API routes
styles/
- everything related to styling and theming
typings/
- type declarations for Typescript
utils/
- helper functions
views/
- container blocks that define a page structure and contain unique components for a particular view
Q: What is the difference between pages and views?
A: Pages define and generate route locations, get initial or static data, and optionally configure the head element. Views define the unique structure of components and spread data among children. Page components may render different views conditionally.