Learn to build amazing apps with Next.js, GraphQL, Storybook, Typescript, Styled-Components and Framer motion. Everything is included in this single repo.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
Run the storybook server:
npm run storybbok
# or
yarn storybbokOpen http://localhost:6006 with your browser to see the result.
Next.js is a flexible React framework that gives you building blocks to create fast web applications.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
- GraphQL Documentation - learn about GraphQL features and API.
- Learn GraphQL - GraphQL tutorials.
Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
- Storybook Documentation - learn about Storybook features and API.
- Learn Storybook - learn Storybook.
Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
- Styled-Components Documentation - learn Styled-Components.
A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source. Production-ready declarative animations. A simple declarative syntax means you write less code. Less code means your codebase is easier to read and maintain.
- Framer Motion Documentation - learn about Framer Motion features and api.
- Learn Framer Motion - learn Framer Motion with interactive examples.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.