7 |
30 |
31 | );
32 | }
33 |
34 | export default Home;
35 |
36 | export async function generateMetadata() {
37 | // FIXME: Add real data here
38 | return getMetadata({
39 | title: 'Home - Next.js TypeScript Tailwind Starter',
40 | description: 'Next.js TypeScript Tailwind Starter',
41 | pathname: '/',
42 | });
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/shared/mobile-menu/mobile-menu.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion';
4 |
5 | import Link from '@/components/shared/link';
6 |
7 | const ANIMATION_DURATION = 0.2;
8 |
9 | const menuVariants = {
10 | closed: {
11 | opacity: 0,
12 | transition: {
13 | duration: ANIMATION_DURATION,
14 | },
15 | },
16 | opened: {
17 | opacity: 1,
18 | transition: {
19 | duration: ANIMATION_DURATION,
20 | },
21 | },
22 | };
23 |
24 | function MobileMenu({ isOpen, onClick }: { isOpen: boolean; onClick: () => void }) {
25 | return (
26 |
8 |
29 | Getting Started 🚀
9 |10 | Getting started with this project is as simple as cloning the repository and installing 11 | the dependencies: 12 |
13 |
14 |
15 | git clone https://github.com/pixel-point/nextjs-typescript-tailwind-starter.git
16 |
17 | cd nextjs-typescript-tailwind-starter
18 |
19 | npm install
20 |
21 | npm run dev
22 |
23 |
24 | 25 | We hope you find this starter useful, and we are always open to feedback and 26 | contributions! 27 |
28 |
38 |
51 | -
39 |
- 40 | 41 | Home 42 | 43 | 44 |
- 45 | 46 | About 47 | 48 | 49 |
13 |
51 |
14 |
50 |
15 |
19 | NextJS TypeScript Tailwind Starter 👋
20 |21 | Welcome to the NextJS TypeScript Tailwind Starter project! This project is designed to 22 | help you hit the ground running when starting a new project using Next.js, TypeScript, 23 | and Tailwind CSS. 24 |
25 |26 | Our goal is to save you time and effort by providing a clean, well-organized boilerplate 27 | that includes all of the necessary configurations and basic functionalities. This allows 28 | you to focus on building your unique features and content, rather than setting up your 29 | project infrastructure. 30 |
31 | 32 |Features
33 |-
34 |
- 35 | Next.js: Enjoy the benefits of a hybrid static & server rendering, 36 | TypeScript support, smart bundling, route pre-fetching, and more. 37 | 38 |
- 39 | TypeScript: Benefit from static typing and modern JavaScript 40 | features, improving your development experience with better tooling and error 41 | prevention. 42 | 43 |
- 44 | Tailwind CSS: Utilize this highly customizable, low-level CSS 45 | framework to design unique and responsive layouts without writing a single line of 46 | CSS. 47 | 48 |
35 | 
37 |
38 |
39 | Use the `npm install Example output
36 |
37 |
50 | 
60 |
61 | As you may have noticed, `ncu` is colorizing the possible updates into 3 colors: green, cyan and red.
62 |
63 | **🟢 Green updates**
64 |
65 | All the libraries that are in green can be updated safely without really looking at the changelogs (it only concerns patches updates)... So far, we haven't faced any issue when we were updating green dependencies. So usually, just select all of them and update them together.
66 |
67 | **🔵 Cyan updates**
68 |
69 | Cyan updates are related to minor updates. So normally, you should be able to update them without any problem but we'd suggest you to do it one by one and by running tests after each update. It'll take time but it'll be safer.
70 |
71 | **🔴 Red updates**
72 |
73 | Red updates are for major updates. So somehow it means that the version you've specified in the package.json is really permissive. For sure here, you have to update them one by one and have a real look at the changelogs !
74 |
75 | 3. Run `npx npm-check-updates -u` to update all the versions in your package.json
76 |
77 | In this case you'd want to check out changes in `package.json` and revert particular lines which contain major version update.
78 |
79 | 4. Or make use of `npx npm-check-updates ` command to perform batch categories update
80 |
81 | In this case you'd want to specify all the libraries with green updates first
82 |
83 | 5. Run `npm install` to update the deps
84 |
85 | 6. Run the project, check if everything is okay
86 |
87 | 7. If you are done, commit the changes and make a PR, if not, repeat steps 2-5 but with cyan and red updates
88 |
89 |
90 |
91 | ## 🐛 Known issues
92 |
93 | Add information if you're having trouble updating any dependencies, this could be very helpful for future updates
94 |
95 | Alternative approach
51 | 52 | - [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) is a handy little library that for historic reasons came into spotlight as a properly working alternative to [everbugging](https://github.com/npm/cli/issues/708) native `npm outdated && npm update` 53 | - [npx](https://docs.npmjs.com/cli/v8/commands/npx) is a part of functionality of `npm` that allows you use npm packages remote, without local installation 54 | 55 | 1. Open up the project, fetch latest changes, branch out 56 | 2. Run `npx npm-check-updates` to get the list of packages that are out of date 57 | 58 | Example output 59 |
60 |
61 | As you may have noticed, `ncu` is colorizing the possible updates into 3 colors: green, cyan and red.
62 |
63 | **🟢 Green updates**
64 |
65 | All the libraries that are in green can be updated safely without really looking at the changelogs (it only concerns patches updates)... So far, we haven't faced any issue when we were updating green dependencies. So usually, just select all of them and update them together.
66 |
67 | **🔵 Cyan updates**
68 |
69 | Cyan updates are related to minor updates. So normally, you should be able to update them without any problem but we'd suggest you to do it one by one and by running tests after each update. It'll take time but it'll be safer.
70 |
71 | **🔴 Red updates**
72 |
73 | Red updates are for major updates. So somehow it means that the version you've specified in the package.json is really permissive. For sure here, you have to update them one by one and have a real look at the changelogs !
74 |
75 | 3. Run `npx npm-check-updates -u` to update all the versions in your package.json
76 |
77 | In this case you'd want to check out changes in `package.json` and revert particular lines which contain major version update.
78 |
79 | 4. Or make use of `npx npm-check-updates
96 |
107 |
108 | Example
97 | 98 | ### packageName 99 | 100 | - **Issue found on:** D Month, YYYY 101 | - **Problematic version:** x.x.x 102 | - **Last stable version:** x.x.x 103 | 104 | Space for a free-form description of the problem 105 | 106 |
109 |
120 |
--------------------------------------------------------------------------------