theodorusclarence / ts-nextjs-tailwind-starter Goto Github PK
View Code? Open in Web Editor NEW🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features
Home Page: https://tsnext-tw.thcl.dev/
🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features
Home Page: https://tsnext-tw.thcl.dev/
here you tell me to put header or footer
`import * as React from 'react';
export default function Layout({ children }: { children: React.ReactNode }) {
// Put Header or Footer Here
return <>{children}</>;
}`
but if I do this will render 2 layout
I think you should remove Layout from the Pages
export default function HomePage() {
return (
<Layout>
{/* <Seo templateTitle='Home' /> */}
<Seo />
<main>
.......
</main>
</layout>
Automatically generate svg to @/src/svg/
in globals.css
:root {
/* #region /**=========== Primary Color =========== */
/* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
/* list of colors preview https://tailwindcss.com/docs/customizing-colors */
--tw-color-primary-50: 240 249 255;
--tw-color-primary-100: 224 242 254;
--tw-color-primary-200: 186 230 253;
--tw-color-primary-300: 125 211 252;
--tw-color-primary-400: 56 189 248;
--tw-color-primary-500: 14 165 233;
--tw-color-primary-600: 2 132 199;
--tw-color-primary-700: 3 105 161;
--tw-color-primary-800: 7 89 133;
--tw-color-primary-900: 12 74 110;
--color-primary-50: rgb(var(--tw-color-primary-50)); /* #f0f9ff */
--color-primary-100: rgb(var(--tw-color-primary-100)); /* #e0f2fe */
--color-primary-200: rgb(var(--tw-color-primary-200)); /* #bae6fd */
--color-primary-300: rgb(var(--tw-color-primary-300)); /* #7dd3fc */
--color-primary-400: rgb(var(--tw-color-primary-400)); /* #38bdf8 */
--color-primary-500: rgb(var(--tw-color-primary-500)); /* #0ea5e9 */
--color-primary-600: rgb(var(--tw-color-primary-600)); /* #0284c7 */
--color-primary-700: rgb(var(--tw-color-primary-700)); /* #0369a1 */
--color-primary-800: rgb(var(--tw-color-primary-800)); /* #075985 */
--color-primary-900: rgb(var(--tw-color-primary-900)); /* #0c4a6e */
/* #endregion /**======== Primary Color =========== */
}
if I add a color from colors.css, it report a error.
for example :
:root {
/* #region /**=========== Primary Color =========== */
/* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
/* list of colors preview https://tailwindcss.com/docs/customizing-colors */
--tw-color-primary-50: 240 249 255;
--tw-color-primary-100: 224 242 254;
--tw-color-primary-200: 186 230 253;
--tw-color-primary-300: 125 211 252;
--tw-color-primary-400: 56 189 248;
--tw-color-primary-500: 14 165 233;
--tw-color-primary-600: 2 132 199;
--tw-color-primary-700: 3 105 161;
--tw-color-primary-800: 7 89 133;
--tw-color-primary-900: 12 74 110;
--color-primary-50: rgb(var(--tw-color-primary-50)); /* #f0f9ff */
--color-primary-100: rgb(var(--tw-color-primary-100)); /* #e0f2fe */
--color-primary-200: rgb(var(--tw-color-primary-200)); /* #bae6fd */
--color-primary-300: rgb(var(--tw-color-primary-300)); /* #7dd3fc */
--color-primary-400: rgb(var(--tw-color-primary-400)); /* #38bdf8 */
--color-primary-500: rgb(var(--tw-color-primary-500)); /* #0ea5e9 */
--color-primary-600: rgb(var(--tw-color-primary-600)); /* #0284c7 */
--color-primary-700: rgb(var(--tw-color-primary-700)); /* #0369a1 */
--color-primary-800: rgb(var(--tw-color-primary-800)); /* #075985 */
--color-primary-900: rgb(var(--tw-color-primary-900)); /* #0c4a6e */
/* #endregion /**======== Primary Color =========== */
.rose {
--tw-color-primary-50: 255 241 242;
--tw-color-primary-100: 255 228 230;
--tw-color-primary-200: 254 205 211;
--tw-color-primary-300: 253 164 175;
--tw-color-primary-400: 251 113 133;
--tw-color-primary-500: 244 63 94;
--tw-color-primary-600: 225 29 72;
--tw-color-primary-700: 190 18 60;
--tw-color-primary-800: 159 18 57;
--tw-color-primary-900: 136 19 55;
--color-primary-50: rgb(var(--tw-color-primary-50)); /* #fff1f2 */
--color-primary-100: rgb(var(--tw-color-primary-100)); /* #ffe4e6 */
--color-primary-200: rgb(var(--tw-color-primary-200)); /* #fecdd3 */
--color-primary-300: rgb(var(--tw-color-primary-300)); /* #fda4af */
--color-primary-400: rgb(var(--tw-color-primary-400)); /* #fb7185 */
--color-primary-500: rgb(var(--tw-color-primary-500)); /* #f43f5e */
--color-primary-600: rgb(var(--tw-color-primary-600)); /* #e11d48 */
--color-primary-700: rgb(var(--tw-color-primary-700)); /* #be123c */
--color-primary-800: rgb(var(--tw-color-primary-800)); /* #9f1239 */
--color-primary-900: rgb(var(--tw-color-primary-900)); /* #881337 */
}
}
Error Message:
(31:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting`
Hi!!!
Nice work here.
I'm just reviewing the dependencies and found this:
https://github.com/conventional-changelog/standard-version
standard-version is deprecated. If you're a GitHub user, I recommend [release-please](https://github.com/googleapis/release-please) as an alternative. I encourage folks to fork this repository and, if a fork gets popular, I will link to it in this README.
Maybe we could use the recommended library instead.
Thanks!!
While running this locally, Next.js keeps trying to a build a page for sw.js, which returns no props and all our pages are blank. Do you know what this is? I see this is something about service workers? How do we turn this off?
I think the NextImage
component not properly optimizing images because next/image
has been set to layout='responsive'
. If I look in the components.tsx
page there is a usage example, but when the image is loaded it is not actually optimized
produced image URL: https://tsnext-tw.thcl.dev/_next/image?url=%2Ffavicon%2Fapple-icon-180x180.png&w=1920&q=75
it should be w=180
but because layout='responsive'
it uses screen width/parent container size as image width which is w=1920
in my case. I think just leaving it as default layout or removing the layout prop and fixed image size will be working fine
Hi Theodorus,
I am trying to add a tooltip for icon in the Input component, the library used is @tippyjs/react
import Tippy from '@tippyjs/react';
import clsx from 'clsx';
import * as React from 'react';
import { RegisterOptions, useFormContext } from 'react-hook-form';
import { HiExclamationCircle } from 'react-icons/hi';
export type InputProps = {
/** Input label */
label: string;
/**
* id to be initialized with React Hook Form,
* must be the same with the pre-defined types.
*/
id: string;
/** Input placeholder */
placeholder?: string;
/** Small text below input, useful for additional information */
helperText?: string;
/**
* Input type
* @example text, email, password
*/
type?: React.HTMLInputTypeAttribute;
/** Disables the input and shows defaultValue (can be set from React Hook Form) */
readOnly?: boolean;
/** Disable error style (not disabling error validation) */
hideError?: boolean;
/** Manual validation using RHF, it is encouraged to use yup resolver instead */
validation?: RegisterOptions;
} & React.ComponentPropsWithoutRef<'input'>;
export default function Input({
label,
placeholder = '',
helperText,
id,
type = 'text',
readOnly = false,
hideError = false,
validation,
...rest
}: InputProps) {
const {
register,
formState: { errors },
} = useFormContext();
return (
<div>
<label htmlFor={id} className='block text-sm font-normal text-gray-700'>
{label}
</label>
<div className='relative mt-1'>
<input
{...register(id, validation)}
{...rest}
type={type}
name={id}
id={id}
readOnly={readOnly}
className={clsx(
readOnly
? 'bg-gray-100 focus:ring-0 cursor-not-allowed border-gray-300 focus:border-gray-300'
: errors[id]
? 'focus:ring-red-500 border-red-500 focus:border-red-500'
: 'focus:ring-primary-500 border-gray-300 focus:border-primary-500',
'block w-full rounded-md shadow-sm'
)}
placeholder={placeholder}
aria-describedby={id}
/>
{!hideError && errors[id] && (
<div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
<Tippy content="Hello">
<HiExclamationCircle className='text-xl text-red-500' />
</Tippy>
</div>
)}
</div>
<div className='mt-1'>
{/* {helperText && <p className='text-xs text-red-500'>{helperText}</p>} */}
{!hideError && errors[id] && (
// <span className='text-sm text-red-500'>{errors[id].message}</span>
<span className='text-sm text-red-500'>error</span>
)}
</div>
</div>
);
}
is this the right way to use tippy?
{!hideError && errors[id] && (
<div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
<Tippy content="Hello">
<HiExclamationCircle className='text-xl text-red-500' />
</Tippy>
</div>
)}
Probably headwind for development
then proofed with rustywind to cover clsx bug?
there will be some class clashes everytime tho.
Works perfectly locally but when pushing to vercel the custom fonts are not being used
node v18.16.0
npm 9.8.0
npx Next.js v13.4.4
$ npm run build
> [email protected] build
> next build
- info Linting and checking validity of types ...Failed to compile.
./src/pages/_app.tsx:13:11
Type error: 'Component' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any> | null' is not a valid JSX element.
Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/shmuelm/node_modules/@types/react/ts5.0/index").ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
11 |
12 | function MyApp({ Component, pageProps }: AppProps) {
> 13 | return <Component {...pageProps} />;
| ^
14 | }
15 |
16 | export default MyApp;
Step to recreate:
npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter project-name
Need to install the following packages:
[email protected]
Ok to proceed? (y)
cd project-name
npm install
npm run build
Hello!
I was trying to first commit and ran into this issue during Typecheck Github job was being checked.
Locally I had ran yarn typecheck and it was not throwing any error.
I'm not sure how I can fix that error without modifying the next.config file.
Any suggestions on that?
thanks in advance!
(as it's a public repo, https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475)
Run yarn typecheck
yarn run v1.22.19
$ tsc --noEmit --incremental false
Error: src/app/page.tsx(1[6](https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475/job/17841913484#step:6:7),18): error TS230[7](https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475/job/17841913484#step:6:8): Cannot find module '~/svg/Logo.svg' or its corresponding type declarations.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 2.
Hi, I understand that there was some migration to new a standard with changes from pages to app, etc.
There used to be an Seo component. What happened to it? Is it no longer appropriate for the new standard? Can I just use it as it used to be or would it no longer work?
What I am talking about:
https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/pages-directory/src/components/Seo.tsx
console says GET http://localhost:3000/favicon.ico 404 (Not Found)
(i didn't edit anythings in src > components > Seo.tsx or public > favicon)
The problem is when i Link to other pages, console says it visiting 404 pages several times.
404.tsx
import * as React from 'react';
import { RiAlarmWarningFill } from 'react-icons/ri';
import Layout from '@/components/layout/Layout';
import ArrowLink from '@/components/links/ArrowLink';
import Seo from '@/components/Seo';
export default function NotFoundPage() {
return (
<Layout title='404'>
<Seo templateTitle='Not Found' />
...
Layout.tsx
import * as React from 'react';
import Header from './Header';
export default function Layout({
children,
title,
prevUrl,
}: {
children: React.ReactNode;
title: string;
prevUrl?: string;
}) {
return (
<>
<Header title={title} prevUrl={prevUrl} />
<section className='min-h-full'>{children}</section>
...
Header.tsx
export default function Header({
title,
prevUrl,
}: {
title: string;
prevUrl?: string;
}) {
console.log(title, prevUrl)
...
why?
Just wanted to let you know that the cursor on https://tsnext-tw.thcl.dev/components changes to the resize cursor, instead of pointer when hovering above a Link or Button component.
This confused me a little bit when checking out the demo, since the resize cursor indicated that you could resize the element. I would change this behaviour.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
PS E:\ArtHaven\ArtMaven\artmavenreal> yarn install
yarn install v1.22.4
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
success Already up-to-date.
$ husky install
'husky' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
tried npm install
[email protected] prepare
husky install
'husky' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code 1
npm ERR! path E:\ArtHaven\ArtMaven\artmavenreal
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c husky install
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lesli\AppData\Local\npm-cache\_logs\2023-04-17T16_31_18_966Z-debug-0.log
PS E:\ArtHaven\ArtMaven\artmavenreal>
title
Hi, thanks for the awesome template
I just encountered this little update to the AppProps in the _app.tsx file
Basically AppProps is now generic and you can pass your custom props to it
Like here when using next-auth
import { Session } from 'next-auth/core/types';
import { SessionProvider } from 'next-auth/react';
interface CustomPageProps {
session: Session;
}
function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
return (
<SessionProvider session={pageProps.session} refetchInterval={0}>
<Component {...pageProps} />
</SessionProvider>
);
}
I thought you might want to include it
Cheers
When upgraded to next 13 with app directory, SVGR webpack config needs to be migrated to SWC
I think it's very questionable to default to optionally displaying the fonts by setting font-display
to optional
in the @font-face
in globals.css
. I know that only Inter
is set to optional
, but devs often copy/paste the whole @font-face
that's in the template when importing their own fonts, trusting it will work for them, and the font-display
property comes along with it.
You really would be required to give zero fucks about the design of your app/site to be ok with not loading your fonts to save the tiny sliver of time it takes to load them. Also, if you are working with a designer, setting the fonts to optional
is just downright disrepectful, it's like you are saying "I know you problably carefully picked out these fonts for this design, but I don't care and I'm going to optionally load them anyways."
The default for the font-display
value should not be optional
. Maybe block
? Or, maybe keep it s optional
but add a helpful comment?
https://www.npmjs.com/package/prettier-plugin-organize-imports
After yarn add -D prettier-plugin-organize-imports, It's not work.
Most of the time I remove it anyway, not suitable for most projects, going to change it into different hover color
Hello Theodor,
I first would like to thank you for the work and effort that you have poured into this project!
Next, I would like to propose a minor change to the approach that you have taken towards the absolute import Aliases. Even though I understand the potential reasons behind your choice, I still think that a less opinionated approach would be better appreciated by the community. Therefore, I will be sending a pull request towards you. In it, I'll be making absolute imports simply absolute (i.e. instead of @/components/something
we will have simply components/something
).
If you see the change going well with your vision for this boilerplate then you may accept it, else just close the PR nothing personal 😃
Have a nice one !
I'm getting this error whenever I try to add Tailwindcss to my Nextjs project initiated with "create-next-app --typescript".
Therefore I wanted to try your template but now having the exact same issue.
I have tried installing types for 'accepts' using "yarn add @types/accepts" but then it shows the same error for "body-parser" and keeps going on and on and telling me to add types for different packages which are unknown to me.
Do you know why is this happening?
this line <meta name='theme-color' content='#ffffff' />
is setting the theme to white which causes status bar and behind page bg on iPhone to be white which was hard to debug I suggest removing it or adding a comment.
First time using husky, when use Conventional Commit giving error something like this :
1.22.11
Hi Theodorus,
I am trying to pass a isLandscape hook to children, but got stuck. here is what I have wrote
// Layout.tsx
import clsx from 'clsx';
import * as React from 'react';
import { useMediaQuery } from 'react-responsive';
import Footer from '@/components/layout/Footer';
import Header from '@/components/layout/Header';
const defaultLayout = {
switch: false,
};
type LayoutProps = {
templateTitle?: string;
children: React.ReactNode;
} & Partial<typeof defaultLayout>;
export default function Layout(props: LayoutProps) {
const m = {
...defaultLayout,
...props,
};
const isLandscape = useMediaQuery({ query: '(orientation: landscape)' });
return (
<div>
<Header landscape={isLandscape}/>
{m.children}
<Footer landscape={isLandscape}/>
</div>
);
}
How can I pass the isLandscape
hook to children?
With the expansion pack, we can install dependencies and all of the configs just by a bash command.
It will be managed on a separate repository https://github.com/theodorusclarence/expansion-pack
That is the roadmap that I got in mind with some example repo I have made. If you have something you want to add and contribute, comment below!
I would first like to thank you for making this repository available, it helped me a lot and facilitated several environment configuration activities.
I would like to suggest setting dark mode in the application context, it would help a lot to use Tailwind resources in themes and components
Once again, thank you for everything.
Recently started having an issue: When i create a new project i get the following error when running yarn:
Invalid value type 1580:0 in /Users/{user}/projects/{project-name}/yarn.lock
If i delete the yarn.lock file and run yarn, issue is resolved.
I'm attempting to change the title of an instance of this site, but not having luck when changing the default values in Seo.tsx
Could you please help guide me in the right direction? I think I must have missed a step somewhere. Thanks!
Whenever we commit to GIT locally using this repo, the commit takes a really, really long time, say 2 minutes. I believe this has something to do with husky, but I'm not sure, as I don't understand husky at all or what other pre-commit checks are done here. Removing husky from the package.json didn't seem to help either. Anyway, any idea what we can do to speed up the commits?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.