Usually you already have empty repository (maybe with README.md file) and you need to put this starter in new repo.
-
Clone repository of your new project
-
Go to Next.js starter repo and download zip archive of code. Or you can download zip directly
-
Unzip archive and past content of starter into your project local folder
-
Commit changes. Done :)
yarn start- starts app in dev modeyarn build- creates production buildyarn serve- runs local server with production buildyarn storybook- starts storybook app in dev modeyarn build-storybook- creates production build of storybook app
/.storybook - storybook staff
/.storybook/main.js - here you can tweak storybook settings (e.g. webpack config)
Reference - Custom Webpack Config
/.storybook/preview.js - here you can import some scripts or styles from app
and these files will be included in storybook build
/.storybook/preview-head.html - here you can populate <head> tag of storybook html.
It's useful for google fonts or different public scripts.
Reference - Add Custom Head Tags
/config - folder for different app configs or util functions, which are needed in next.config.js
/config/env.js - here we grab all env variables from .env file
/config/paths.js - this file has function, which parses tsconfig.json and and get webpack path aliases.
It's necessary because webpack should understand imports with paths like @components/*
Here you can store different public files, like favicon or public scripts.
Reference - Static File Serving
Here we store all app files. It's handy to configure prettier watch whole this folder (TS and TSX extensions)
/src/assets/css - folder for css files. It contains index.css file where you can import all other global css files.
To import assets from a node_modules path, prefix it with a ~:
@import "~normalize.css";
@import "~nprogress/nprogress.css";
@import "./global.css";
@import "./fonts.css";global.css contains css reset and default styles like font-family and font-size
/src/assets/fonts - for local fonts
/src/assets/images - for images with extensions: .bmp, .gif, .jpe?g, .png, .webp
/src/assets/svg - for svg icons.
You can import svg as React Component:
import { ReactComponent as UserIcon } from '@assets/svg/icon_name.svg';or just get public url of icon:
import userIconSrc from '@assets/svg/icon_name.svg';Image- img decorator with support of lazy-loadingLayout- contains root layout of page withheader,footerandmainblockPage- we use this component to specify title and meta tags of pageContentContainer- may be useful to restrict content widthLink- wrapper ofNext/Link. Please use this component instead ofNext/Linkcomponent
Usually has 2 files: theme.ts - for style constants like colors, fonts and etc, and common.ts - for other cases
Usually we store wrapper of Next/App component.
It's can be handy to store redux wrapper here (withRedux) and auth wrapper (withAuth)
References:
- remove
next-i18nextlibrary viayarn remove next-i18next - remove folder
src/i18n - remove code inside comments <
i18n:enabled-i18n:enabled:end> - uncomment code inside comments <
i18n:disabled-i18n:disabled:end> - remove directory
public/static/locales - Done :)