nextjs ts

NextJS Coalerplate

Самоуверенный шаблон для проектов Kickstart с использованием NextJS

Функции

• ?? В следующем 13
• ⚛ React 18
• ? Пользовательский документ и приложение
• ⌨ Безопасность типа с помощью TypeScript в строгом режиме
• ? Напишите SCSS & Future CSS с PostCSS + PRESET-ENV
• ? SVG Sprite для икон
• ? Заполните свой код Eslint & StyleLint
• ? Красивее для последовательного стиля кода
• ? Библиотека Jest + тестирование для тестов
• ☝ Husky + Lint-Lint для обеспечения качества кода
• Файл EditorConfig для последовательного отступления
• ? Redux с react-redux и redux-thunk

Вариация ветвей

Пользовательский сервер

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Фермент

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Нет Redux

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Начиная

Прежде чем вы сможете начать разработку своего удивительного приложения, вам нужно установить зависимости проекта. Убедитесь, что у вас установлен узлы (> = 10.13.0) и NPM.

$ npm install

⌨ Развитие

Как только все зависимости будут установлены, вы можете начать разработку. Чтобы запустить сервер разработки на http: // localhost: 3000 run:

$ npm run dev

? Производство

Для запуска вашего приложения в производстве обязательно запустите сборку в первую очередь:

$ npm run build

А затем запустите заявку с предоставленного номера порта (по умолчанию 3000, если не предоставлено):

$ PORT=8080 npm run start

? Статический

Вы также можете экспортировать свое приложение на статический веб -сайт:

npm run export

Это сделает статические HTML -страницы в ./out

? Линтерс

Корловый пластин предоставляет пару Линтеров, которые помогут вам следить за консистенцией кода и безопасности типа. Существует три линтера: один для CSS, один для TypeScript и один для безопасности типа. Вы можете использовать каждый из них отдельно, используя следующие команды:

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

Совет: чтобы получить максимальную отдачу от ваших Linters Установите соответствующие плагины (StyleLint, TSLINT) для вашего редактора или IDE

Красивее

Creatier помогает вам обеспечить согласованный (самоуверенный) стиль кода. Если возможно, вы можете сообщить своему редактору форматировать вас код при сохранении файла. Если вы не можете этого сделать, вы можете запустить более красивые вручную, используя:

$ npm run prettier

? Тесты

Вы можете написать свои тесты, используя Jest и фермент. Вы можете запустить весь тест со следующей командой

$ npm run test

Если вы хотите следить за разработкой испытаний, вы можете использовать:

$ npm run test:dev

Модули

Машинопись

TypeScript и Babel предварительно сконфигурированы с помощью пользовательских модулей. Это означает, что вы можете использовать абсолютный импорт с помощью пользовательских пространств имен по умолчанию для следующих модулей:

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

По умолчанию путь ./src/common/css настроен как включенный путь для нашего загрузчика SCSS. Это означает, что вы можете импортировать любой из файлов этой папки непосредственно без относительного или абсолютного пути:

 @import 'variables' ;
@import 'colors' ;