zed-nextjs-react-snippets
A collection of handy Next.js and React code snippets for the Zed editor. Boost your productivity with quick templates for pages, API routes, data fetching, hooks, and more!
✨ Features
- Next.js page, API route, layout, and middleware snippets
- Data fetching:
getServerSideProps,getStaticProps,getStaticPaths - React functional/class components, hooks, context, PropTypes, and more
- Async/await and Axios API call templates
- Fragments, custom hooks, and utility patterns
- Supports both JSX and TSX!
🚀 Installation
- Clone or download this repository.
- Copy the folder to your Zed extensions directory (usually
~/.config/zed/extensions/). - Restart Zed.
📝 Usage
- Open a JavaScript, JSX, or TSX file in Zed.
- Type a snippet prefix (e.g.,
npage,gssp,rfc,apifetch, etc.) and press Tab to expand.
📋 Snippet List
| Prefix | Description |
|---|---|
| npage | Next.js page component |
| apiroute | Next.js API route handler |
| middleware | Next.js middleware (app directory) |
| gssp | Next.js getServerSideProps |
| gsp | Next.js getStaticProps |
| gspaths | Next.js getStaticPaths |
| nlink | Next.js Link component |
| nimg | Next.js Image component |
| nlayout | Next.js Layout component |
| rfc | React functional component |
| rcc | React class component |
| us | React useState hook |
| ue | React useEffect hook |
| urf | React useRef hook |
| uctx | React useContext hook |
| apifetch | Fetch API call (promise) |
| apifetcha | Fetch API call (async/await) |
| axiosa | Axios API call (async/await) |
| ptypes | React PropTypes template |
| frag | React Fragment |
| fragsh | React Fragment shorthand |
| hook | React custom hook template |
| expall | Export all from a module |
| context | React context with provider and hook |
| ... | And more! |
🤝 Contributing
Feel free to open issues or pull requests for new snippets, improvements, or bug fixes!
📢 Credits
Created by Konstantinos Psychogios. Inspired by the Zed community and popular React/Next.js workflows.