aliendev66 / complete-setup-nextjs-typescript-jest-etc Goto Github PK

Here we have a complete setup of a nextjs project with all the necessary tools for an excellent development.

Next.js is a minimalistic React framework that runs on the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating, it's also a straightforward way for developers with React experience to get productive quickly.

The advantage of this approach is to be able to create rich user experiences in a uniform way, without compromising SEO (Search Engine Optimisation) factors that are key to good ranking on Google and other search engines.

This SETUP makes it easier to get up and running with a well-structured Next.js and TypeScript application.

• Next.js - Minimalistic framework for server-rendered React applications.
• Typescript - Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
• Built-in Project CLI- Create pages, components, actions, reducers with one command by using built-in cli.
• Docker - A tool designed to make it easier to create, deploy, and run applications by using containers.
• Babel - The compiler for next generation JavaScript.
• ESLint - The pluggable linting utility.
• Reverse Proxy - Lightweight server for proxying API requests.
• Bundler Analyzer - Visualize the size of webpack output files with an interactive zoomable treemap.
• Jest - Javascript testing framework , created by developers who created React.
• React Testing Library - Simple and complete React DOM testing utilities that encourage good testing practices.
• next-runtime-dotenv - Expose environment variables to the runtime config of Next.js
• next-i18next - An internationalization-framework which provides a function that takes a key, some options, and returns the value for the current language. Helps you to add language translation support to your app.
• Storybook - An open source tool for developing UI components in isolation for React.

IN DEVELOPMENT

To start the Project, you may have to meke it beforehand if you haven't yet.

~ $ git clone https://github.com/AlienDev66/complete-setup-nextjs-typescript-jest-etc.git

Install dependences with:

~ $ yarn install

or

~ $ npm install

Then you can use this project:

~ $ yarn dev

After starting, an interactive menu will let you configure the component to be created. Firstly, you'll be asked for the type of the component whether it's a page or a functional component. Then you'll be prompted with the other options relevant to your selection.

Eventually, you'll end up with a page or component with style and test files in no time.

Licensed under the MIT License, Copyright © 2021-present AlienDev66