- TypeScript
- Next.js
- ESLint
- Prettier
- Tailwind CSS
Use this templateを押す
git clone repo_url
or
yarn create next-app --example https://github.com/uchiyama-shouta/next-template
yarn
mkdir src/components
yarn add react-query
// _app.tsx
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
},
},
})
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<QueryClientProvider client={queryClient}>
<Component {...pageProps} />
<ReactQueryDevtools />
</QueryClientProvider>
);
};
yarn add @apollo/client graphql
// _app.tsx
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: process.env.NEXT_PUBLIC_API_URL,
cache: new InMemoryCache()
});
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
);
}
yarn add recoil
// _app.tsx
import { RecoilRoot } from 'recoil';
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
);
}