πŸ’» Template using Next + TypeScript

Related tags

Learning resource typescript eslint styled-components jest nextjs prettier commitizen storybook husky testing-library
Overview

Hi there! πŸ‘‹

This project was developed with care and in the best way I could with the knowledge I have, I hope you enjoy it! πŸ₯³

What is inside?

Getting Started

Install dependencies:

yarn

or

npm install

Run development server

yarn dev

or

npm run dev

Open http://localhost:3000 with your browser to see the result.

Structure

└── src
    β”œβ”€β”€ __helpers__
    β”œβ”€β”€ components
    β”œβ”€β”€ pages
    β”œβ”€β”€ styles
Folder Description
helpers Functions to handle the tests
components Page components
pages Pages components
styles Application styles

Conventions

Components

└── <MyComponent>
    β”œβ”€β”€ <MyComponent>.tsx
    β”œβ”€β”€ <MyComponent>.test.tsx
    β”œβ”€β”€ <MyComponent>.styled.ts
    β”œβ”€β”€ <MyComponent>.stories.tsx
    └── index.ts
Files Description
.tsx Component implementation
.test.tsx Component tests
.styled.ts Component stylesheet using styled-components
.stories.tsx Storybook component
index.ts File to export the component

Commands

  • dev: run development server
  • build: creates the production build version
  • lint: runs the linter in all components and pages
  • test: runs jest to test all components and pages
  • storybook: runs docs with storybook

Made with πŸ’œ by Giovanna

You might also like...

A template for buildind scrollable landing pages with Gsap, ScrollTrigger and webgi engine in typescript using parcel bundler.

A template for buildind scrollable landing pages with Gsap, ScrollTrigger and webgi engine in typescript using parcel bundler.

Threejs + GSAP + WEBGi 100% Free Course This is a template used in my fast course "building scrolable pages with ScrollTrigger and Threejs" for a vani

Dec 17, 2022

Statically prevent 404s in your Next.js applications using TypeScript

Statically prevent 404s in your Next.js applications using TypeScript

next-static-paths Statically prevent HTTP 404 Not Found in your Next.js applications using TypeScript and code generation. Features πŸ’» A command-line

Jul 3, 2022

Decentralized twitter using Solidity, Ethereum, hardhat, ethers, IPFS, Next.JS, TypeScript, TailwindCSS.

DWITTER: Decentralized Twitter Check out the deployed version of this app at https://dwtr.wajeshubham.in Transactions on Ethereum are slow. Therefore,

Sep 2, 2022

⚑ Personal website and blog made using TypeScript, Next.js, Tailwind CSS.

⚑ Personal website and blog made using TypeScript, Next.js, Tailwind CSS.

小康 blog View Demo · Report Bug · Request Feature 🌍 honghong.me Framework: Next.js Database: Planetscale ORM: Prisma Authentication: NextAuth.js Deplo

Dec 31, 2022

Learn Web 2.0 and Web 3.0 Development using Next.js, Typescript, AWS CDK, AWS Serverless, Ethereum and AWS Aurora Serverless

Learn Web 2.0 Cloud and Web 3.0 Development in Baby Steps In this course repo we will learn Web 2.0 cloud development using the latest state of the ar

Jan 3, 2023

My personal website – Built using Next.js, TypeScript, MDX, Sanity.io and Tailwind

kenaqshal.com Framework: Next.js Database: PlanetScale ORM: Prisma Authentication: NextAuth.js Deployment: Vercel CMS: Sanity Styling: Tailwind CSS Ov

Nov 24, 2022

πŸ’‘ A FullStack Quiz web app using TypeScript and Next.js!

A FullStack Quiz app using TypeScript and Next.js! This projects is in portuguese! Self Hosting npm i && npm run build && npm run start # or yarn && y

Aug 13, 2022

Discord.js bot starter template, Slash Commands only (Raymond forced me to make a bot template)

boat-template Raymond forced me to make a bot template This template is meant is just for stupidness ig Getting Started Rename the config.example.ts t

Jan 5, 2022

This Next.js app replicates the WordPress Template Hierarchy, but in JavaScript

Next.js WordPress Template Hierarchy Routing This Next.js app replicates the WordPress Template Hierarchy, but in JavaScript! Requirements WordPress P

Oct 31, 2022
Comments
  • next project configuration

    next project configuration

    Motivation

    Configuração de um projeto Next com TypeScript

    Proposed solution

    Nesse setup estΓ‘ sendo utilizado:

    • Styled-components para estilização
    • Storybook para documentar os componentes em todos os casos de uso
    • Jest e Testing Library para testar a aplicação
    • Eslint e Prettier formatador para deixar os cΓ³digos padronizados
    • Commitzen para deixar os commits padronizados
    opened by giovannalinda 0
Owner
Giovanna Souza
a front end developer who is always looking for the next level πŸ’œ
Giovanna Souza
GitHub
πŸ’» Template using Next + TypeScript

Hi there! ?? This project was developed with care and in the best way I could with the knowledge I have, I hope you enjoy it! ?? What is inside? Next

Giovanna Souza 14 Dec 30, 2022
A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui

Welcome to FullStack Next.js template ?? A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui ✨ Demo Tech Ne

Avneesh Agarwal 10 Oct 16, 2022
πŸ›« TypeScript Starter template to simplify creating your next npm package.

TypeScript Starter Kit This is an opinionated TypeScript Starter kit to help kick-start development of your next npm package. ?? Get Started Luckily,

Open Web 7 Sep 27, 2022
πŸ›« TypeScript Starter template to simplify creating your next npm package.

TypeScript Starter Kit This is an opinionated TypeScript Starter kit to help kick-start development of your next npm package. ?? Get Started Luckily,

Open Web Foundation 5 May 19, 2022
Minimal Next.js + TypeScript + Tailwind CSS starter template.

⚑ next-ts-tailwind-starter ⚑ Minimal Next.js + TypeScript + Tailwind CSS starter template. Made by Piyush Pandey Give a ⭐ if you want to appreciate. 1

Piyush Pandey 3 Jun 28, 2022
πŸš€ Battle-tested Next.js TypeScript Prisma template with an opinionated architecture. πŸ”‹ Included ℒ️

?? The Ultimate Next.js Starter Pack Next.js ^12 + TypeScript + Prisma + Chakra UI starter packed with useful development features. I've adopted indus

Nam 7 Dec 10, 2022
A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

Next.js Template Quickly start a new Next.js project A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Do

Lorenzo Carneli 2 Oct 7, 2022
Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.

✨ Free Next.js marketing website template for SaaS startups ✨ Everything you need to build a great landing page / marketing website for your startup.

RainBow 6 Nov 5, 2022
next-graphql-server is a library for building production-grade GraphQL servers using Next.js with API Routes

next-graphql-server next-graphql-server is an easy to use Next.js library for creating performant GraphQL endpoints on top of Next.js API Routes. Star

Jakub Neander 82 Nov 21, 2022
A template for a vanilla(no ui-framework) project with webgi engine in typescript using parcel bundler.

WebGi starter project A template for a vanilla(no ui-framework) project with webgi engine in typescript using parcel bundler. For the latest version a

null 40 Jan 3, 2023