Next.js is a minimalistic React framework that runs in the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating it is also a straightforward way for developers with React experience to get productive fast.
The advantages of this approach is to be able to create Rich User experiences in a uniform way, without compromising Search Engine Optimisation (SEO) factors that are key to good ranking on Google and other search engines.
This boilerplate make it easier to get started with a well-structured Next.js and TypeScript application.
By the end of setup, you'll have a Next.js project and features which is specified at the below.
This boilerplate is modular architecture includes the latest powerfull tools.
Here are a few highlights to look out for in this boilerplate
git clone https://github.com/Onramplab/next-starter.git
npm
npm install
yarn
yarn install
cp .env.example .env.local
Once the installation is done, you can run the following command:
npm run start:dev
Then open http://localhost:3000/ to see your app.
Pankod boilerplate is shipped with a CLI tool to streamline the creation of new components. By using the CLI tool, you may easily add pages, class components or functional components to your project and have all the required actions, reducers and imports are automatically created for you.
To start the CLI, you may run the following npm command:
npm run cli
After starting, an interactive menu will let you configure the component the be created. Firstly, you'll be asked for the type of the component whether it's a page, functional component or class component. Then you'll be prompted with the other options relevant to your selection of the component type.
For example, let's go through the steps of the creation of a new page component.
Enter page name
Do you want to add custom route or use default route name?,
Do you want to have a connection to store?
If you choose yes, the following store connection methods and imports are generated:
Do you want to create a new reducer or use your own?
Do you want to add a style file?
After answering questions it generates files in miliseconds.
At this point, your project layout should look like this:
.
├── __mocks__
├── documentation
├── project-cli
├── src
│ ├── app
│ │ ├── components
│ │ │ ├── AuthProvider.tsx
│ │ │ ├── index.ts
│ │ │ ├── MyApp.tsx
│ │ │ └── PageContainer.tsx
│ │ ├── configs
│ │ │ ├── index.ts
│ │ │ └── menuItems.tsx
│ │ ├── index.ts
│ │ └── redux
│ │ ├── index.ts
│ │ ├── reducers.ts
│ │ └── store.ts
│ ├── assets
│ │ ├── antd-custom.less
│ │ ├── styles.less
│ │ └── tailwind-extension.css
│ ├── console.d.ts
│ ├── lib
│ │ └── helpers.ts
│ ├── mdx.d.ts
│ ├── modules
│ │ ├── account
│ │ │ ├── components
│ │ │ │ ├── Accountable.tsx
│ │ │ │ ├── AccountForm
│ │ │ │ │ ├── AccountForm.stories.tsx
│ │ │ │ │ ├── AccountForm.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── AccountList.tsx
│ │ │ │ ├── CreateAccountForm.tsx
│ │ │ │ ├── index.ts
│ │ │ │ └── UpdateAccountForm.tsx
│ │ │ ├── documents
│ │ │ │ ├── AccountApiKey.mdx
│ │ │ │ ├── Authentication.tsx
│ │ │ │ └── index.ts
│ │ │ ├── entities
│ │ │ │ ├── index.ts
│ │ │ │ └── interfaces
│ │ │ │ ├── IAccount.d.ts
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── pages
│ │ │ │ ├── AccountListPage.tsx
│ │ │ │ └── index.ts
│ │ │ ├── redux
│ │ │ │ ├── actionConsts.ts
│ │ │ │ ├── actions.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── reducers
│ │ │ │ ├── accountReducer.ts
│ │ │ │ └── index.ts
│ │ │ └── services
│ │ │ ├── AccountService.ts
│ │ │ ├── index.ts
│ │ │ └── interfaces
│ │ │ ├── AccountModel.d.ts
│ │ │ ├── AccountsPayload.d.ts
│ │ │ ├── AccountsResponse.d.ts
│ │ │ └── index.ts
│ │ ├── auth
│ │ │ ├── core
│ │ │ │ ├── components
│ │ │ │ │ ├── AuthWrapper.tsx
│ │ │ │ │ ├── Forgot.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── Signin.module.scss
│ │ │ │ │ ├── Signin.tsx
│ │ │ │ │ └── Signup.tsx
│ │ │ │ ├── hooks
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── useAuth.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── redux
│ │ │ │ │ ├── actions.ts
│ │ │ │ │ ├── consts.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── reducer.ts
│ │ │ │ │ └── selectors.ts
│ │ │ │ └── services
│ │ │ │ ├── AuthService.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── interfaces
│ │ │ │ ├── AuthModel.d.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── LoginPayload.d.ts
│ │ │ │ └── LoginResponse.d.ts
│ │ │ ├── index.ts
│ │ │ ├── jwt
│ │ │ │ ├── hooks
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── useJWTAuth.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── redux
│ │ │ │ │ ├── actions.ts
│ │ │ │ │ ├── consts.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── services
│ │ │ │ ├── AuthService.tsx
│ │ │ │ └── index.ts
│ │ │ └── README.md
│ │ ├── core
│ │ │ ├── components
│ │ │ │ ├── AppProvider.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── NotFound.tsx
│ │ │ │ ├── Page.tsx
│ │ │ │ ├── SidebarMenu.tsx
│ │ │ │ └── styles
│ │ │ │ ├── AnimatedBG.js
│ │ │ │ ├── GlobalStyles.ts
│ │ │ │ ├── Header.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── Page.ts
│ │ │ │ └── Sidebar.ts
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ └── usePubSub.ts
│ │ │ ├── index.ts
│ │ │ └── redux
│ │ │ ├── actions
│ │ │ │ ├── ActionConsts.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── wrapperActions.ts
│ │ │ ├── index.ts
│ │ │ ├── interfaces
│ │ │ │ ├── Action.d.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── Store.d.ts
│ │ │ │ └── Wrapper.d.ts
│ │ │ └── reducers
│ │ │ ├── index.ts
│ │ │ └── wrapperReducer.ts
│ │ ├── home
│ │ │ ├── index.ts
│ │ │ └── pages
│ │ │ ├── HomeMainPage.tsx
│ │ │ └── index.ts
│ │ ├── shared
│ │ │ ├── index.ts
│ │ │ ├── mirage
│ │ │ │ └── mirage.ts
│ │ │ ├── __mock__
│ │ │ │ ├── account.json
│ │ │ │ ├── auth.json
│ │ │ │ ├── index.ts
│ │ │ │ └── user.json
│ │ │ ├── redux
│ │ │ │ ├── index.ts
│ │ │ │ └── interfaces
│ │ │ │ ├── Action.d.ts
│ │ │ │ └── index.ts
│ │ │ └── services
│ │ │ ├── api
│ │ │ │ ├── Http.spec.ts
│ │ │ │ ├── Http.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── interfaces
│ │ │ │ ├── HttpModel.d.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ └── user
│ │ ├── components
│ │ │ ├── CreateUserForm.tsx
│ │ │ ├── index.ts
│ │ │ ├── UpdateUserForm.tsx
│ │ │ └── UserForm.tsx
│ │ ├── containers
│ │ │ ├── index.ts
│ │ │ └── UserListPage.tsx
│ │ ├── entities
│ │ │ ├── index.ts
│ │ │ └── interfaces
│ │ │ ├── index.ts
│ │ │ └── IUser.d.ts
│ │ ├── index.ts
│ │ └── services
│ │ ├── index.ts
│ │ ├── interfaces
│ │ │ ├── index.ts
│ │ │ ├── UserModel.d.ts
│ │ │ ├── UserRequestPayload.d.ts
│ │ │ ├── UserRequestQueryPayload.d.ts
│ │ │ ├── UserResponse.d.ts
│ │ │ └── UsersResponse.d.ts
│ │ └── UserService.ts
│ ├── pages
│ │ ├── admin
│ │ │ ├── accounts
│ │ │ │ └── index.tsx
│ │ │ └── users
│ │ │ └── index.tsx
│ │ ├── _app.tsx
│ │ ├── auth
│ │ │ ├── forgot.tsx
│ │ │ ├── signin.tsx
│ │ │ └── signup.tsx
│ │ ├── _document.tsx
│ │ ├── home
│ │ │ └── index.tsx
│ │ └── index.ts
│ └── server
│ ├── index.js
│ ├── proxy.js
│ └── routes.js
├── tools
├── babel.config.js
├── banner.jpg
├── base.json
├── commitlint.config.js
├── docker-compose.yml
├── Dockerfile
├── eslintrc.js
├── jest.config.js
├── jest.setup.ts
├── jest.tsconfig.json
├── next.config.js
├── next-env.d.ts
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
├── yarn-error.log
└── yarn.lock
Licensed under the MIT License, Copyright © 2018-present Pankod