106 | }
107 |
108 | function Feature({ children, main }) {
109 | return (
110 |
111 |
112 |
{children}
113 |
114 |
115 |
116 |
117 |
118 | )
119 | }
120 |
121 | function InfoText({ text }) {
122 | return (
123 |
124 |
125 | {text}
126 |
127 | )
128 | }
129 |
130 | function CheckIcon(props) {
131 | return (
132 |
140 | )
141 | }
142 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **Notice**: While Next.js remains a great option, I'd recommend checking out [Remix](https://github.com/remix-run/remix). Since I've started using it, I've been able to build production-ready apps **10 times faster**. No kidding. I don't say this lightly, I used to love Next.js (and still do) and actually tried to convince people that Next is better than Remix for various reasons. But on a mission to become a better developer, I've started looking into other frameworks and keep an open mind. 2023 is an especially exciting year for web developers as more and more edge-native technologies pop up. If you're serious about web development, I'd highly recommend trying other frameworks.
2 |
3 | # Next.js Advanced Starter 🚀
4 |
5 | An opinionated starter skeleton with advanced features for Next.js.
6 |
7 | Use Tailwind CSS, ESLint, Prettier & absolute imports instantly.
8 | Easily extendable zero-config template for pros and beginners.
9 |
10 | Check out the [Demo website.](https://nextjs-advanced-starter.vercel.app/)
11 |
12 | ## Table of Contents
13 |
14 | - [Next.js Advanced Starter 🚀](#nextjs-advanced-starter-)
15 | - [Table of Contents](#table-of-contents)
16 | - [Why?](#why)
17 | - [Features](#features)
18 | - [Who this template is for](#who-this-template-is-for)
19 | - [How to use](#how-to-use)
20 | - [Explanation why some dependencies are in this template](#explanation-why-some-dependencies-are-in-this-template)
21 | - [@tailwindcss/forms](#tailwindcssforms)
22 | - [@tailwindcss/typography](#tailwindcsstypography)
23 | - [Extending the template](#extending-the-template)
24 | - [Config files](#config-files)
25 | - [Changing the font](#changing-the-font)
26 | - [Configuring ESLint rules](#configuring-eslint-rules)
27 | - [Adding new absolute import paths](#adding-new-absolute-import-paths)
28 | - [Recommended extensions for VSCode](#recommended-extensions-for-vscode)
29 | - [Resources](#resources)
30 |
31 | ## Why?
32 |
33 | This template aims to provide a minimal well-thought-out base for building advanced Next.js powered websites.
34 |
35 | It feels like there are so many templates and tutorials about configuring stacks out there that just don't work, no matter what you do. This is the template that **just works**. I know how frustrating it can be just wanting to build something but needing DAYS for coming up with the initial configuration. Especially getting Eslint + Prettier + absolute imports to work (well) together is super annoying and I believe using these features should be as simple as clicking a button. Also you probably want to style your webapp and there are few better ways than styling it with Tailwind CSS.
36 |
37 | The reason why I created this template in the first place is because I absolutely hate having to copy the same config over to a new project everytime and I don't really want to use existing templates because there always seems to be something wrong with them. Either the config is weird or the maintainers are not transparent with features.
38 |
39 | **Inviting you to collaborate**
40 | That being said I invite you to leave your critique about this template. If there's something wrong with ESLint, if prettier doesn't work as expected, if there's a new version of React or if the README is not transparent enough please don't hesitate to open an issue or (even better) a pull request. I've had enough with templates that don't work.
41 |
42 | ## Features
43 |
44 | - Fast design workflow with Tailwind CSS 3.0
45 | - write css like the cool kids
46 | - unused classes are purged automatically = really small css bundle size
47 | - TypeScript
48 | - typed JavaScript
49 | - drastically reduces errors
50 | - #1 must have in any web-dev project
51 | - Customizable ESLint config
52 | - Code formatting with Prettier
53 | - Code is auto-formatted on save
54 | - Inter font
55 | - Nice looking apple-like open source font.
56 | - Don't like it? It's easily [replacable](#changing-the-font)
57 | - Standardized absolute imports
58 | - Import from @components/MyComp instead of ../../components/MyComp
59 |
60 | ## Who this template is for
61 |
62 | **TLDR** This template is for beginners and pros alike. For Pros: You don't have to copy the same config over to a new project. For Beginners: Start coding like the pros without having to configure anything.
63 |
64 | If you're a newcomer to Next.js or React and you just want to start building something, this is a great place to start without worrying about configuring rules, code-formatting, css purging etc. You can figure that out later, just get developing and build things people love. I personally feel like that the features in this template are the way to go for starting a new web-dev project. Especially tailwind css has seen explosive growth and is probably going to be the standard way of styling webapps in the future. This is the minimal base-template I wish I've had when I started developing with React.
65 |
66 | If you're already a pro, this is the base-template for you. It's incredibly easy to extend or reconfigure. It's deliberately kept small so it stays performant while you build on top of it.
67 |
68 | ## How to use
69 |
70 | 1. Click **"Use this Template"** button which will create a new github repo for you automatically
71 | 2. Pull the newly created repo by following the github guide which will be shown after you finish step 1.
72 | 3. Install dependencies and run dev server:
73 |
74 | ```bash
75 | npm install
76 | # or
77 | yarn install
78 |
79 | # then
80 | npm run dev
81 | # or
82 | yarn dev
83 | ```
84 |
85 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
86 |
87 | ## Explanation why some dependencies are in this template
88 |
89 | ### @tailwindcss/forms
90 |
91 | First party dependency for resetting input styles so you don't have to manually reset like this:
92 |
93 | ```css
94 | textarea,
95 | input[type="text"],
96 | input[type="search"],
97 | input[type="button"],
98 | input[type="submit"] {
99 | -webkit-appearance: none;
100 | border-radius: 0;
101 | }
102 | ```
103 |
104 | ### @tailwindcss/typography
105 |
106 | A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults. Just add the class "prose" to your html and content will be styled automatically.
107 |
108 | E.g this html:
109 |
110 | ```html
111 |
112 |
How to set up an enterprise Next.js stack
113 |
114 | Configuring Next.js with TypeScript, ESLint & prettier can become really
115 | annoying, especially if you're a beginner and don't know the intricate
116 | details of all the moving parts in a web-dev environment. The most important
117 | things you have to set up are:
118 |
119 |
120 |
A working ESLint config
121 |
Prettier plugins that auto-format your code
122 |
Absolute imports
123 |
124 |
125 | ```
126 |
127 | will be rendered like this:
128 |
129 | 
130 |
131 | If you don't need or want this dependency you can safely remove it.
132 |
133 | ## Extending the template
134 |
135 | ### Config files
136 |
137 | | File name | What it does |
138 | | ----------------------- | --------------------------------------------------------------------------------------------------------- |
139 | | `tsconfig.json` | TypeScript configuration. Tells IDE which absolute imports exist and works in conjunction with .babelrc |
140 | | `.eslintrc.json` | Config file for finding and fixing problems in code. E.g: No function should be used before it's defined. |
141 | | `tailwind.config.js` | TailwindCSS config. Adds new sizes, shadows, borders etc. to your tailwind classes. |
142 | | `postcss.config.js` | Tells your project to include TailwindCSS in build chain. |
143 | | `prettier.config.js` | Rules for formatting your code. E.g: indent code 6 spaces instead of 4 |
144 | | `.vscode/settings.json` | Custom settings for your VSCode workspace. Tells VSCode to auto-format code on save. |
145 |
146 | ### Changing the font
147 |
148 | 1. In `src/pages/_app.tsx` replace the link tag with your url (can be Google Fonts, Adobe Typekit, etc.)
149 |
150 | ```html
151 |
155 | ```
156 |
157 | 2. In tailwind.config.js replace "Inter" with your custom font
158 |
159 | ```javascript
160 | extend: {
161 | fontFamily: {
162 | sans: ["Inter", ...defaultTheme.fontFamily.sans],
163 | }
164 | ```
165 |
166 | As of Next 10.0.2 google fonts are optimized automatically:
167 |
168 | Tip: The font you choose should have at least these weights: 400, 500, 600, 700, 800. You need these weights for the tailwind font classes to have an effect. E.g if you don't include the weight 500, the class "font-medium" won't have any effect.
169 |
170 | ### Configuring ESLint rules
171 |
172 | If you need additional rules or want to turn off specific rules just edit `.eslintrc.js`. Only change the order of plugins and items in the "extends" array if you know what you're doing as this can have unexpected side effects: Items lower down the list override previous extensions. This is the intended behaviour so you can extend and configure existing rules easily.
173 |
174 | ### Adding new absolute import paths
175 |
176 | This will instruct Next.js to set up a new alias to your specific folder. If you try to import a file with @myalias now it will still throw an error however because we need to tell our IDE that this path actually exists:
177 |
178 | Add path in `.tsconfig`
179 |
180 | ```javascript
181 | "@myalias/*": ["./src/myaliasfolder/*"]
182 | ```
183 |
184 | That's it! Nextjs 11 now automatically sets up babel and everything else and just works. In previous releases you had to manually configure babel as well.
185 |
186 | ## Recommended extensions for VSCode
187 |
188 | If you're a beginner and don't know which extensions you need, definitely install these:
189 |
190 | 1. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Adds error highlighting to VSCode.
191 | 2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Auto-fixes formatting errors everytime you hit save.
192 | 3. [TailwindCSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss): Tailwind className suggestions as you type.
193 |
194 | ## Resources
195 |
196 | If you're not yet familiar with some of the technologies used in this project here are some resources to help you get started:
197 |
198 | [Tailwind CSS course](https://tailwindcss.com/course): Free course by the creators of tailwind. Definitely check it out. It helps you "think" in tailwind. E.g before going through this course I styled my webapps by adding classes from the beginning. However, a much better approach is to 1) semantically structure your html without any classes and 2) to then add styling by using tailwind classes.
199 |
200 | [ESLint config guide](https://eslint.org/docs/user-guide/configuring): If you need to configure ESLint read their documentation (or at least the parts you need). You'll be surprised how much just makes sense after that.
201 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/snapshot.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders homepage unchanged 1`] = `
4 |
5 |
6 |
9 |
10 |
13 | Next.js
14 |
15 | Advanced Starter
16 |
17 |
20 | Tailwind CSS 3.0, ESLint & Prettier without a single line of config! Easily extendable zero-config template for pros and beginners.
21 |
22 |
25 |
29 |
32 |
35 |
38 |
51 |
54 | Fast design workflow with
55 |
58 |
71 | Tailwind CSS
72 |
73 |