Next JS/TS Snipets for VScode Designed to be simple, short and powerfull
The snippets are a combination of:
nnextnpnext pagesspserver side propsspstatic propsspthstatic paths
Feel free to open a pull request if you to add a snippet, suggest a change, fix a bug or anything else.
np- nextPagenpssp- nextPageServerSidePropsnpsp- nextPageStaticPropsnpspth- nextPageStaticPathsnssp- nextServerSidePropsnsp- nextStaticPropsnspth- nextStaticPathsnip- nextInitialPropsnimg- nextImagenapp- nextAppndoc- nextDocumentnapi- nextApinmid- nextMiddleware
import { NextPage } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export default FileNameimport { NextPage, GetServerSideProps } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {}
}
}
export default FileNameimport { NextPage, GetStaticProps } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props: {},
}
}
export default FileNameimport { NextPage, GetStaticPaths } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}
export default FileNameexport const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {}
}
}export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props: {},
}
}export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}FileName.getInitialProps = async (ctx) => {
return {
}
}<Image src="" alt="" />import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocumentimport type { NextApiRequest, NextApiResponse } from 'next'
interface Data {}
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
}import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export async function middleware(request: NextRequest) {
}
export const config = {
matcher: '/about/:path*',
}np- nextPagenpssp- nextPageServerSidePropsnpsp- nextPageStaticPropsnpspth- nextPageStaticPathsnssp- nextServerSidePropsnsp- nextStaticPropsnspth- nextStaticPathsnip- nextInitialPropsnimg- nextImagenapp- nextAppndoc- nextDocumentnapi- nextApinmid- nextMiddleware
const FileName = ({}) => {
return <div></div>
}
export default FileNameconst FileName = ({}) => {
return <div></div>
}
export const getServerSideProps = async (ctx) => {
return {
props: {}
}
}
export default FileNameconst FileName = ({}) => {
return <div></div>
}
export const getStaticProps = async (ctx) => {
return {
props: {},
}
}
export default FileNameconst FileName = ({}) => {
return <div></div>
}
export const getStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}
export default FileNameexport const getServerSideProps = async (ctx) => {
return {
props: {}
}
}export const getStaticProps = async (ctx) => {
return {
props: {},
}
}export const getStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}FileName.getInitialProps = async (ctx) => {
return {
}
}<Image src="" alt="" />export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocumentexport default async function handler(req, res) {
}import { NextResponse } from 'next/server'
export async function middleware(request) {
}
export const config = {
matcher: '/about/:path*',
}