├── public ├── favicon.ico └── vercel.svg ├── next-env.d.ts ├── .prettierrc ├── styled.d.ts ├── .env.local.example ├── src ├── pages │ ├── api │ │ └── hello.ts │ ├── _document.tsx │ ├── index.tsx │ └── _app.tsx ├── ui │ ├── themes.ts │ ├── layouts │ │ ├── DefaultLayout.tsx │ │ └── parts │ │ │ └── Footer.tsx │ └── components │ │ └── Text.tsx └── redux │ ├── store.ts │ └── slices │ ├── themeSlice.ts │ └── userSlice.ts ├── .babelrc ├── .gitignore ├── tsconfig.json ├── README.md ├── package.json ├── LICENSE └── yarn.lock /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benja/nextjs-redux/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /styled.d.ts: -------------------------------------------------------------------------------- 1 | import 'styled-components' 2 | import { Theme } from './src/ui/themes' 3 | 4 | declare module 'styled-components' { 5 | export interface DefaultTheme extends Theme {} 6 | } 7 | -------------------------------------------------------------------------------- /.env.local.example: -------------------------------------------------------------------------------- 1 | # Only available in Node.js environment 2 | DB_HOST="localhost" 3 | DB_USER="admin" 4 | DB_PASS="pass" 5 | 6 | # Exposed to the browser 7 | NEXT_PUBLIC_API_URL="https://api.example.com/" -------------------------------------------------------------------------------- /src/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | import {NextApiRequest, NextApiResponse} from "next"; 2 | 3 | export default (req: NextApiRequest, res: NextApiResponse<{ name: string }>) => { 4 | res.status(200).json({ name: 'It works :)' }) 5 | } 6 | -------------------------------------------------------------------------------- /src/ui/themes.ts: -------------------------------------------------------------------------------- 1 | export const themes = { 2 | light: { 3 | primary: '#F4A261', 4 | text: '#1c1c1c', 5 | footerBackground: '#f6f6f6', 6 | }, 7 | } as const; 8 | 9 | export type Theme = typeof themes.light; 10 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [ 4 | [ 5 | "styled-components", { 6 | "ssr": true, 7 | "displayName": true, 8 | "preprocess": true 9 | } 10 | ] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | 3 | import userReducer from './slices/userSlice'; 4 | import themeReducer from './slices/themeSlice'; 5 | 6 | export default configureStore({ 7 | reducer: { 8 | user: userReducer, 9 | theme: themeReducer, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | .idea 4 | # dependencies 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | -------------------------------------------------------------------------------- /src/ui/layouts/DefaultLayout.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { Text } from '../components/Text'; 4 | import Footer from './parts/Footer'; 5 | 6 | export default function DefaultLayout(props) { 7 | return ( 8 | 9 | {props.children} 10 |